webpack配置sass-loader解析scss,sass

2018.05.12 22:20 阅读 775

方便css的书写,可以在webpack中使用sass,需要配置sass-loader,使webpack解析sass语法。

首先安装node-sass sass-loader css-loader style-loader 依赖。

其中sass-loader功能是将sass转换为css,需要依赖node-sass包,所以同时安装node-sass

css-loaderstyle-loader的作用可以参考文章webpack中配置css-loader,style-loader解析css

npm install node-sass sass-loader css-loader style-loader -D

安装好依赖包之后,在webpack.config.js中配置loader。

module.exports = {
    // 其他配置省略
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader'],
        exclude: /node_modules/
      }
    ]
  }
}
  • test用于匹配scss结尾的文件。

  • use为一个数组,先以sass-loader解析成css,然后以css-loader解析文件,最后以style-loader解析文件,配置中sass-loader style-loader css-loader在数组中的顺序不可改变。

  • exclude为不包括node-modules目录,表示不编译解析node-modules目录中的文件。

配置好了,之后webpack就可以解析scss文件及scss语法了。