iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

專案使用 SCSS 寫法,我們之前用 Gulp 來 Compile,也使用過 ASP.NET MVC Web Compiler 來處理,後者的缺點是必須使用 Visual Studio 來開發,我個人還是習慣使用 VS Code,所以變成改 SCSS 的話就要在 Visual Studio 裡面改... Orz。

導入 Webpack 後,就可以透過 sass-loader 來處理 SCSS 檔,然後再透過 css-loader 最後 style-loader 將樣式引入頁面 head。

安裝各種 loader

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

將樣式引入頁面 head

設定 sass-loadercss-loaderstyle-loader 的順序處理 scss 檔,注意 Webpack 的處理順序是 由下而上 / 由右而左

webpack.common.js
module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        "style-loader",      
        "css-loader",
        "sass-loader"
      ]
    }]
  }
}

提取樣式存成獨立 CSS 檔

如果要將樣式獨立存成 CSS 檔,需要另外透過 Plugin 處理。Webpack V4 以前是使用 extract-text-webpack-plugin,V4 則推薦使用 mini-css-extract-plugin

npm i mini-css-extract-plugin -D
webpack.common.js
var MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,      
        "css-loader",
        "sass-loader"
      ]
    }]
  },  
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ]  
}

如此即可將樣式另存為 CSS 檔,這種作法能夠有效優化 Bundle 檔案大小,記得也要參考上一篇 頁面緩存設定 所提到的方式來處理緩存策略。


上一篇
頁面緩存設定
下一篇
ASP.NET MVC 導入 PostCSS
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言