在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等外掛，新增字首