一. 准备工作
1. 如果我们希望在项目中使用less、scss、stylus来写样式webpack是否可以帮助我们处理?
这里以less为例,其他也是一样的
2. 先创建一个less文件,依然放在css文件夹中
@fontSize:50px;
@fontColor:black;
body{
color: @fontColor;
font-size: @fontSize;
}
二. less文件处理--less-loader
1. 在官网中查找less-loader相关使用说明
2. 安装对应loader
这里还安装了less,因为webpack会使用less对less文件进行编译
npm install less@3.9.0 less-loader@4.0.1 --save-dev --force
3. 修改对应的配置文件,将该 loader 添加到 webpack
的配置中去
添加一个rules选项,用于处理.less文件
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
}
三. 重新打包
npm run build