Webpack實戰（六）：如何優雅地運用樣式CSS預處理

上一篇文章中，我主要分享了《Webpack如何分離樣式文件》CSS 預處理器是一個能讓你通過預處理器自己獨有的語法來生成CSS的程序,css預處理指的是在開發中我們經常會使用一些樣式預編譯語言，在項目打包過程中再將這些預編譯語言轉換成css。這些預編譯語言具有便捷的特性，使用這些，可以減少代碼編寫，降低項目的開發和維護成本，提高開發效率。

目前比較流行的幾種主要是Sass、LESS、Stylus、PostCSS，今天我主要分享的是Sass、LESS在webpack中的配置及使用情況。

Sass與SCSS

Sass本身是對CSS的語法增強，它有兩種語法，現在使用更多的是SCSS（對CSS3的擴充版本）。所以你會發現，在安裝和配置loader時都是sass-loader，而實際的文件後綴是.scss。

sass-loader就是將SCSS語法編譯爲CSS，因此在使用時通常還要搭配css-loader和style-loader。類似於我們裝babel-loader時還要安裝babel-core，loader本身只是編譯核心庫與Webpack的連接器，因此這裏我們除了sass-loader以外還要安裝node-sass，node-sass是真正用來編譯SCSS的，而sass-loader只是起到黏合的作用。
安裝命令如下：

npm install sass-loader node-sass  --save-dev

/** a.scss **/
$base-color: red;

html {
  body{
    color: $base-color;
  }
}

import './a.scss';
document.write('hello webpack2');

如果沒配置wepack.config.js文件則報下面的錯誤

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

緊接着配置文件： 如下代碼

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: './dist'
          },
        }, 'css-loader','sass-loader'], // "css-loader" 將 CSS 轉化成 CommonJS 模塊
        exclude: /node_modules/
      },
      // 配置.scss正則等
      {
        test: /\.scss$/i,
        use: ['style-loader', 'css-loader','sass-loader'], // "css-loader" 將 CSS 轉化成 CommonJS 模塊
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    // filename: '[name].css',
    chunkFilename: '[id].css'
  })],
}

打包之後代碼如下圖：

編譯後運行的效果圖：

由此可以看出scss已被編譯成css，並在瀏覽器中起了樣式效果應有的作用效果。

如果我們想要在瀏覽器的調試工具裏查看源碼，需要分別爲sass-loader和css-loader單獨添加source map的配置項。
把配置文件稍作修改：

{
        test: /\.scss$/i,
        use: ['style-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        }

Le s s

Less也是css預處理器，編譯語言，與Sass一樣需要安裝loader和其本身的編譯模塊，其安裝命令如下

npm install less-loader less --save-dev

Less在配置上也與Sass相似，在這裏就不再做詳解

總結：

以上就是我要分享的css預處理與webpack的結合使用，主要介紹了Scss和Less兩種的安裝、配置和一些引用，運用這些可以節約成本，提高開發性能和效率。

如果想了解更多，請掃描二維碼：