Web前端工程化（七） - less和sass加载器的基本使用

准备学习Web前端工程化的内容，做个记录，以后需要的时候方便查找：

webpack只能打包处理.js相关的文件，其他资源可以使用插件的方式来曲线救国。

打包处理less文件

1 安装处理less文件的loader，运行使用如下命令： 

npm i less-loader less -D

2 在webpack.config.js的module -> rules数组中，添加loader规则如下：

module: { 

    rules : [

      { test: /\.less$/, use: ['style-loader', 'css-loader’, ‘less-loader’] }

    ]

  }

打包处理sass文件

1 安装处理sass文件的loader，运行如下命令：

npm i sass-loader node-sass -D

2 在webpack.config.js的module -> rules数组中，添加loader规则如下：

module: {

    rules : [

      { test: /\.scss$/, use: ['style-loader', 'css-loader’, ‘sass-loader’] }

    ]

  }

注意：在正则表达的约束中，sass的文件类型是scss