css文件处理，安装 less-loader

在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配置的）。