如果我们希望在项目中使用less、scss、stylus来写样式, 我们这里以less为例,其他也是一样的。 我们还是先创建一个less文件,依然放在css文件夹中:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iN5YjM1MzY0EzY3ITYjVTOyYzXzIjN1UTMxMzLcVDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
这里 创建了 Less 并且 写了 样式。
老样子 我们在入口写入依赖 让webpack解析并打包:
然后我们安装 对应的 loader :
语句安装less 和 lessloader:【记得降低版本 不然报错 】
npm install less@版本 less-loader@版本 --save-dev
这里用的是下面这个版本:
npm install [email protected] [email protected] --save-dev
然后我们把
module 放到webpack.config.js中:
module: {
rules: [
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
TIPS:如果存在一样moudle 和 rules 那么直接吧对象复制即可。。。即存在的就不用复制了(认真看即可 不然打包错误):
2021年8月5日 09:50:44: 更新错误: 不知道有时候 那个 loader 好像不是 loader 是 use,就是说 module中 rules 中 的 loader ,css那些都是use ,我现在loaer不行 反正你自己尝试 注意一下这个错误!都试试即可。。。
然后尝试打包运行。。。。