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

時間 2020-01-25

原文原文鏈接

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

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

Sass與SCSS

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

sass-loader就是將SCSS語法編譯爲CSS，所以在使用時一般還要搭配css-loader和style-loader。相似於咱們裝babel-loader時還要安裝babel-core，loader自己只是編譯核心庫與Webpack的鏈接器，所以這裏咱們除了sass-loader之外還要安裝node-sass，node-sass是真正用來編譯SCSS的，而sass-loader只是起到黏合的做用。
安裝命令以下：java

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.node

緊接着配置文件：以下代碼webpack

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，並在瀏覽器中起了樣式效果應有的做用效果。web

若是咱們想要在瀏覽器的調試工具裏查看源碼，須要分別爲sass-loader和css-loader單獨添加source map的配置項。
把配置文件稍做修改：npm

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