demo12 webpack 處理 scss

1.如何處理 scss

sass-loader > css-loader > style-loader (以 <style> 標籤形式添加到 html 中)

或

sass-loader > file-loader > style-loader/url (以 <link> 標籤形式添加到 html 中)

sass-loader: 處理 sass/scss 文件，而且把它們編譯成 css

css-loader: 處理 css，並把 css 代碼轉化爲一個 js module

style-loader: 實現把加載的 css 代碼以 style 標籤的形式插入到 html 中

file-loader: 在這裏實現把 css 提取爲文件

2.安裝相關依賴

注意：sass-loader 依賴於 node-sass

npm install -D sass-loader node-sass
npm install -D css-loader style-loader file-loader
複製代碼

3.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo12
    --src
      -app.js
      -style1.scss
      -style2.scss
    -index.html
    -webpack.config.js
複製代碼

src/app.js

// 同步加載
// import "./style1.scss";
// import "./style2.scss";


window.addEventListener("click", function () {
  // 試試異步加載? 查看控制檯試試
  const style1 = import("./style1.scss");
  const style2 = import("./style2.scss");
});
複製代碼

src/style1.scss

$bgColor: red;
body {
  background-color: $bgColor;
}
複製代碼

src/style2.scss

$color: black;
body {
  color: $color;
}
複製代碼

4.編寫 webpack 配置文件

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        // 以<style>標籤形式引用css
        use: [
          {
            loader: "style-loader",  // 將 JS 字符串生成爲 style 節點
            options: {
              singleton: true // 處理爲單個style標籤,註釋掉試試看?
            }
          },
          "css-loader", // 將 CSS 轉化成 CommonJS 模塊
          "sass-loader" // 將 Sass/Scss 編譯成 CSS
        ]

      }
    ],
    // rules: [
    //   {
    //     test: /\.scss$/,
    //     // 以<link>標籤形式引用css
    //     use: [
    //       "style-loader/url",
    //       {
    //         loader: "file-loader",
    //         options: {
    //           name: '[name].[hash].css'
    //         }
    //       },
    //       "sass-loader"
    //     ]

    //   }
    // ]

  }
};
複製代碼

5.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

打包成功後，結果輸出在 dist 目錄中

6.查看打包結果

建立 index.html 文件,引用打包生成的主文件 (這裏是 app.bundle.js),

<script src="./dist/app.bundle.js"></script>
複製代碼

在瀏覽器打開，

在