创建一个空文件夹,通过 npm init
初始化创建 package.json
文件,通过 npm install webpack --save-dev
命令下载 webpack
,通过 npm install style-loader css-loader --save-dev
命令下载 style-loader
和 css-loader
。
创建 css
文件夹,在里面创建 base.css
和 common.css
,代码如下所示:
html {
background-color: blueviolet;
}
body {
font-size: 20px;
}
app.js
文件,引入 base.css
和 common.css
,use
代表样式的使用, unuse
代表样式的不使用。同时也创建 css.transform.js
文件,代码如下所示:import base from './css/base.css'
import common from './css/common.css'
var flag = false
setInterval(function () {
if (flag) {
base.unuse()
} else {
base.use()
}
flag = !flag
}, 500)
module.exports = function (css) {
console.log(css)
if (window.innerWidth >= 768) {
return css.replace('blueviolet', 'red')
} else {
return css.replace('blueviolet', 'green')
}
}
webpack.config.js
文件,通过 require
引入 path
路径,entry
配置入口文件,output
配置出口文件,配置 output
、publicPath
和 filename
。配置 rules
,test
表示匹配的值为以 .css
文件结尾的,use
表示使用的各种 loader
。 style-loader
是创建一个style
标签,style-loader/url
是在html
中插入一个link
标签(配合file-loader
使用),一个很小众的功能,会把每个import
的css
都处理成一个link标签,造成加载资源的增加,不利于优化。style-loader/useable
是在style
中控制样式插入或者不插入,import
了css
后可以使用 .use()
或者 .unuse()
的方法来控制样式是否插入。file-loader
是生成一个新的css
文件。css-loader
是允许js
来import
一个css
文件。所以,使用 style-loader
和 css-loader
。在 style-loader
进行 options
配置,insertInto
是插入到 DOM
,singleton
是是否只使用一个style
标签,会将多个引入混合为一个 style
标签插入页面,transform
是可以执行一个js
,在 loader
执行的时候执行,也就是浏览器环境,能拿到浏览器的相关信息,insertAt
是插入位置 ,代码如下所示:var path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
insertInto: '#app',
singleton: true,
transform: './css.transform.js'
}
},
{
loader: 'css-loader'
}
]
}
]
}
}
style-loader
所创建的项目进行更改,更改 base.css
、common.css
和 app.js
文件,同时也将 common.css
通过 composes
引入到 base.css
中,代码如下所示:common.css
body {
font-size: 20px;
}
.bigBox {
border: 2px solid #333;
}
base.css
html {
background-color: blueviolet;
}
.box {
composes: bigBox from './common.css';
height: 200px;
width: 200px;
border-radius: 20px;
border: 4px;
background-color: cadetblue;
}
app.js
import base from './css/base.css'
import common from './css/common.css'
var app = document.getElementById('app')
app.innerHTML = '> + base.box +'"'
webpack.config.js
文件中,更改 css-loader
的配置信息。在 options
配置信息中,alias
是解析的别名,importLoader
是 @import
引入其它的 loader
,Minimize
是是否开启压缩,modules
是是否启用css-modules
模块化。通过 : local
可以使用局部的样式,通过 : global
可以使用全局的样式,通过 compose
可以继承一段样式,通过 compose … from path
可以引入一段样式,通过 localIdentName: '[path][name]__[local]--[hash:base64:5]'
可以定义编译出来的 class
名称,代码如下所示:var path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
transform: './css.transform.js'
}
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
}
]
}
]
}
}
通过 npm install less-loader less --save-dev
命令下载 less
,通过 npm install sass-loader node-sass --save-dev
命令下载 sass
。
按照上面的项目文件,更改 base.css
和 common.css
为 base.less
和 common.less
,代码如下所示:
base.less
@homeColor: red;
html {
background-color: @homeColor;
}
.box {
composes: bigBox from './common.less';
height: 200px;
width: 200px;
border-radius: 20px;
border: 4px;
background-color: cadetblue;
}
common.less
body {
font-size: 20px;
}
.bigBox {
border: 2px solid #333;
}
webpack.config.js
文件中,添加 less-loader
,代码如下所示:var path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
transform: './css.transform.js'
}
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
},
{
loader: 'less-loader'
}
]
}
]
}
}