6使用 loader 處理 CSS 和 Sass

不懂程式設計發表於2019-03-04
CSS

1. 什麼是 loader

官方的解釋是這樣的：

loader 用於對模組的原始碼進行轉換。loader 可以使你在 import 或”載入”模組時預處理檔案。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將檔案從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯影像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模組中 import CSS檔案！

可能會一臉懵懂吧。

說白了，就是 loader 類似於 task，能夠處理檔案，比如把 Scss 轉成 CSS，TypeScript 轉成 JavaScript 等。

再不明白的話，還是用例項來說明吧。（其實它的概念並不重要，你會用就行）

2. 用 css-loader 和 style-loader 處理 CSS

現在我們來演示一下如何用 loader 來處理 CSS 檔案。

先準備好內容。

src/app.css

body {
  background: pink;
}
複製程式碼

src/app.js

import css from `./app.css`;

console.log("hello world");
複製程式碼

如果你現在執行 npm run dev 或 webpack 命令，就會出現類似下面的提示錯誤。

6使用 loader 處理 CSS 和 Sass

意思就是說，預設情況下，webpack 處理不了 CSS 的東西。

我們來處理這個問題。

$ npm install --save-dev css-loader style-loader
複製程式碼

webpack.config.js

var HtmlWebpackPlugin = require(`html-webpack-plugin`);

module.exports = {
  entry: `./src/app.js`,
  output: {
    path: __dirname + `/dist`,
    filename: `app.bundle.js`
  },
  plugins: [new HtmlWebpackPlugin({
    template: `./src/index.html`,
    filename: `index.html`,
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [ `style-loader`, `css-loader` ]
      }
    ]
  }
};
複製程式碼

我們來看下效果：

dist/index.html

6使用 loader 處理 CSS 和 Sass

編譯出的內容跟之前的差不多。

我們用瀏覽器開啟 dist/index.html 檔案。

6使用 loader 處理 CSS 和 Sass

編譯出的 app.bundle.js 檔案是有包含 CSS 的內容的。

6使用 loader 處理 CSS 和 Sass

3. 用 sass-loader 把 SASS 編譯成 CSS

應該都知道 SASS 是什麼吧，不懂的話可以查一下。

說白了，就是可以用更好的語法來寫 CSS，比如用巢狀。看下面的例子應該就會理解的。

把 src/app.css 改名為 src/app.scss

src/app.scss

body {
  background: pink;
  p {
    color: red;
  }
}
複製程式碼

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>hello world</p>
</body>
</html>
複製程式碼

src/app.js

import css from `./app.scss`;

console.log("hello world");
複製程式碼

安裝（中間可能要下載二進位制包，要耐心等待）

$ npm install sass-loader node-sass --save-dev
複製程式碼

webpack.config.js

var HtmlWebpackPlugin = require(`html-webpack-plugin`);

module.exports = {
  entry: `./src/app.js`,
  output: {
    path: __dirname + `/dist`,
    filename: `app.bundle.js`
  },
  plugins: [new HtmlWebpackPlugin({
    template: `./src/index.html`,
    filename: `index.html`,
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })],
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [ `style-loader`, `css-loader`, `sass-loader` ]
      }
    ]
  }
};
複製程式碼

效果如下：

6使用 loader 處理 CSS 和 Sass

4. 用 extract-text-webpack-plugin 把 CSS 分離成檔案

有時候我們要把 SASS 或 CSS 處理好後，放到一個 CSS 檔案中，用這個外掛就可以實現。

$ npm install --save-dev extract-text-webpack-plugin
複製程式碼

webpack.config.js

var HtmlWebpackPlugin = require(`html-webpack-plugin`);
const ExtractTextPlugin = require(`extract-text-webpack-plugin`);

module.exports = {
  entry: `./src/app.js`,
  output: {
    path: __dirname + `/dist`,
    filename: `app.bundle.js`
  },
  plugins: [new HtmlWebpackPlugin({
      template: `./src/index.html`,
      filename: `index.html`,
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
    }),
    new ExtractTextPlugin(`style.css`)
  ],
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: `style-loader`,
          //resolve-url-loader may be chained before sass-loader if necessary
          use: [`css-loader`, `sass-loader`]
        })
      }
    ]
  }
};
複製程式碼

在 dist 目錄下生成了 style.css 檔案。

dist/style.css

body {
  background: pink; }
  body p {
    color: red; }
複製程式碼

dist/index.html

6使用 loader 處理 CSS 和 Sass

先說這麼多吧。

相關文章