在vue单页面应用当中使用sass

之前在项目当中有使用过sass,但是使用的方式有点Low，是在vue文件当中的style下面通过@import的方式引入的。

其实在webpack当中也可以通过在main.js当中import "index.scss"  这种方式引入

需要的解析器，分别为style-loader css-loader sass-loader node-sass这几个

webpack当中配置

{
      test: /\.scss$/,
      loader: 'style-loader!css-loader!sass-loader'
}

注意style-loader!css-loader!sass-loader的顺序不能乱，要按照顺序来，否则会报错，另外也不能有多余的符号

{
      test: /\.scss$/,
      loader: 'style-loader!css-loader!postcss-loader!sass-loader'
}

使用postcss-loader,可以使用autoprefixer等插件，添加前缀