webpack使用Less文件的配置

Less文件也是一种样式文件，与CSS文件类似，使用时也需要对webpack进行配置。配置步骤如下：

1. 在css文件夹中创建special.less文件，修改字体大小与字体颜色

//定义变量
@fontSize: 40px;
@fontColor: white;

body {
  font-size: @fontSize;
  color: @fontColor;
}

2. 在js入口文件中引用less文件，并且在页面上显示内容

require('./css/special.less');
document.writeln('
Less文件的使用
');

3. 使用less文件之前，必须安装less-loader，输入命令：npm install [email protected] --save。注意less-loader的版本必须为4.1.0及以下，高版本在打包时会报错
4. 在webpack.config.js文件的rules中添加以下内容

  // 导入less文件
      {
        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
        }]
      }

5. 将项目进行打包，结果显示在页面上，less文件可以正常显示