本篇文章主要讲解webpack对Less和Sass的打包配置:
- 安装css-loader
- 安装style-loader
- 安装less-loader和sass-loader
实例
- 初始化项目,创建package.json
npm init
- 安装style-loader
npm install style-loader --save-dev
- 安装css-loader
npm install css-loader --save-dev
- 安装less-loader
npm install less-loader less --save-dev
- 安装sass-loader
npm install sass-loader node-sass --save-dev
- 创建dist目录,用于打包输出
- 创建src/css/base.less文件,并添加代码
@mainColor:#000;
html{
background: @mainColor;
}
- 创建src/app.js,并引入base.less
import './css/base.less';
- 创建webpack.config.js并配置
// 引入node的path模块
var path = require('path');
module.exports = {
entry: {
app: "./src/app.js" // 要打包的入口文件
},
output: {
path: path.resolve(__dirname, "dist"), // 使用绝对路径,dist目录
publicPath: './dist/',
filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
},
module: {
rules: [ // 定义css规则
{
test: /\.less$/, // 正则匹配要识别的css,这里改成.less
use: [
{
loader: 'style-loader' // 使用style-loader进行处理,位置必须在css-loader前面
},
{
loader: 'css-loader' // 使用css-loader进行处理
},
{
loader:'less-loader' // 引入less-loader
}
]
}
]
}
}
这里需要注意的是loader的执行顺序是从下往上,所以会先执行less-loader将less代码转化成css代码,再由css-loader处理css代码,再由style-loader处理样式。
- 执行打包命令
webpack
生成app.bundle.js
- 创建index.html并引入打包后的
app.bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/app.bundle.js"></script>
</body>
</html>
- 运行结果
从下图可以看到样式中已经将less代码转化成css代码。
sass的配置与less基本一样,所以这里不做讲解。