細說 webpack 8. 使用 loader 轉換 css 文件

你們好！我是蘿蔔，Webpack 中一切皆模塊，咱們能夠將CSS做爲模塊引入到代碼中，這時候就須要添加 Webpack 的loader 來處理 CSS 了。

css-loader

首先添加 css-loader：

npm i -D css-loader複製代碼

而後給webpack.config.js添加rule：

{
  module: {
    rules: {
      {
        test: /\.css$/,
        use: [‘css-loader’]
      }
    }
  }
}複製代碼

這時候修改js文件，添加下面代碼：

import css from ‘./css/index.css’;
console.log(css, css.toString());複製代碼

這時候 CSS 會被轉成字符串， JS 就能夠直接使用。

除了上面直接在webpack.config.js中添加rule，還能夠在 JavaScript 中直接使用下面的方式引入：

import css from ‘css-loader!./css/index.css’;
console.log(css, css.toString());複製代碼

style-loader

有了 css-loader 能夠識別 CSS 語法了，下面就須要 style-loader 出場了。簡單來講，style-loader 是將 css-loader 打包好的 CSS 代碼以 <style> 標籤的形式插入到 HTML 文件中，因此style-loader是和css-loader成對出現的，而且style-loader是在css-loader以後。首先安裝style-loader：

npm i -D style-loader複製代碼

mini-css-extract-plugin

CSS 做爲 <style> 標籤放到 HTML 內仍是不夠的，咱們還須要將 CSS 以 <link> 的方式經過 URL 的方式引入進來，這時候就須要使用 mini-css-extract-plugin 這個插件了，首先安裝它：

npm i -D mini-css-extract-plugin 複製代碼

mini-css-extract-plugin這個使用的時候須要分別配置 loader 和 plugin，loader 須要放在css-loader以後代替style-loader：

module.exports = {
  plugins: [
    // 添加 插件 plugin
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        // 添加 loader
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
} 複製代碼

CSS Modules

CSS Modules 指的是全部的 CSS 類名及其動畫名都只是局部做用域的 CSS 文件。CSS Modules 既不是官方標準，也不是瀏覽器的特性，而是在構建過程當中對 CSS 類名選擇器限定做用域的一種方式，CSS Modules 主要解決的問題有：

1.解決 CSS 類都是全局的，容易形成全局污染（樣式衝突）；

2.JS 和 CSS 共享類名；

3.能夠方便的編寫出更加健壯和擴展方便的 CSS。

這類 CSS 模塊化的解決方案很早以前前端社區就有一些討論和方案，好比最先的經過 CSS 命名約定的 BEM、OOCSS 等，再到 React 中使用的用 JavaScript 來寫 CSS 規則的 CSS in JS 方案，再到經過編譯工具來幫助 JavaScript 可使用 CSS 的 CSS Modules 方案。

下面來看下 CSS Modules 到底是什麼，咱們來看下代碼表現，首先建立一個app.css文件，內容以下：

/* app.css */
.elment {
 background-color: blue;
 color: white;
 font-size: 24px;
}複製代碼

咱們知道了，在 JS 中能夠直接import一個 CSS 文件：

// app.js
import styles from ‘./app.css’複製代碼

咱們知道了，在 JS 中能夠直接import一個 CSS 文件：

// app.js
import styles from ‘./app.css’;
let element = `
    <div class=」${styles.element}」>
      CSS Module
    </div>
`;
 
document.write(element);複製代碼

在 css-loader 增長modules的選項，說明打開 CSS Modules 支持。

module.export = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
}複製代碼

跟 CSS Modules 相關的配置還有不少，具體能夠在css-loader對應的文檔找到。

CSS 預處理器

因爲 CSS 標準自誕生以來，一直致力於在表現力層面的發展，相對基本語法和核心機制並無實質性的變化，因此產生了好多 CSS 的預處理器。預處理器補足了 CSS 的一些語法上的缺陷，支持變量、運算、函數、做用域、繼承、嵌套寫法等，使用 CSS 預處理器能夠大大的提高開發效率和體驗，同時可以更好的作好模塊化開發。

Tips：CSS 核心語法直到近些年纔有大的發展，好比自定義屬性（custom properties，又稱爲變量 variables） 、嵌套寫法，可是已經遠遠的落後於 CSS 預處理器的發展。

常見的 CSS 預處理器有：Less，Sass 及其語法變種 Scss和Stylus。

1.使用預處理器 loader

下面以 Less 預處理器爲例，介紹 CSS 預處理器的用法。首先安裝對應的 loader：less-loader：

npm i -D less-loader複製代碼

而後修改webpack.config.js：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader' // 將 less 編譯爲 CSS
      }
    ]
  }
}複製代碼

less-loader只是將 Less 語法編譯成 CSS，後續還須要使用css-loader和style-loader處理才能夠，因此通常來講須要配合使用：

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          'less-loader' // 將 less 編譯爲 CSS
        ]
      }
    ]
  }
}複製代碼

Tips：注意一些預處理語言須要安裝對應的解析器，例如 sass-loader，須要同時安裝 node-sass：npm install sass-loader node-sass --save-dev

小結

本篇要介紹了 Webpack 中 CSS 相關的配置，主要內容包含：CSS Webpack 配置、CSS 預處理器配置。CSS 配置相對來講比較複雜，若是咱們使用 CSS 的預處理器來編寫代碼，首先須要配置對應的預處理器 loader，將擴展的語法轉成 CSS 代碼，而後在配合 css-loader 和 style-loader。在生產環境推薦使用 mini-css-extract-plugin 將 CSS 內容導出到 CSS 文件來供頁面單獨引入。若是你們喜歡蘿蔔分享的文章，能夠點擊關注，天天都有新的分享。