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两种的安装、配置和一些引用，运用这些能够节约成本，提升开发性能和效率。

若是想了解更多，请扫描二维码：