在webpack中,如果要在项目中使用less来写样式,应该怎么做?
1.准备
- 我们先创建一个less文件,依然放在css文件夹中。
/*special.less文件的内容*/
@fontSize: 50px;
@fontColor: red;
body {
color: @fontColor;
font-size: @fontSize;
}
- 在main.js文件中,引用less,为看出less效果添加div(添加的内容)
//3依赖css文件
require('./css/normal.css')
//4引用less
require('./css/special.less')
document.write('<div>哈哈哈哈哈哈</div>')
2.安装 less-loader
对于webpack本身来说,对于加载less是不支持的。那怎么办呢?给webpack扩展对应的loader。
我的webpack是3.6.0版本,node是v16.17.0版本,由于兼容性问题,less和less.loade需要安装的版本是:less@3.9.0和less-loader@4.1.0
步骤:在终端进到项目当前文件夹,输入npm install --save-dev less@3.9.0 less-loader@4.1.0
3.修改对应的配置文件
看官方文档,修改对应的配置文件。修改webpack.config.js,在其中添加less的相关内容。(这里,之前配置了CSS,修改后的文件如下)
/*webpack.config.js*/
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader','css-loader' ],
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
}
到这里,就完成了,可以打包(附上成功运行的截图,以及在浏览器上的截图,背景色是css配置的)。