webpack编译打包scss

时间:2022-08-16 17:49:23

依赖

webpack编译scss需要用到这几个loader:style-loader,css-loader,postcss-loader,sass-loader以及插件:extract-text-webpack-plugin

安装相关loader和插件:

npm install style-loader css-loader postcss-loader sass-loader extract-text-webpack-plugin

postcss-loader

postcss-loader是为了兼容多个浏览器需要在一些css上添加兼容前缀。在项目下添加postcss.config.js,内容如下:

module.exports = {
 plugins: [
  require('autoprefixer')({ /* ...options */ })
 ]
}

webpack.config.js

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

module.exports = {
 entry: {
  entry: __dirname + '/app/main.js',
 },

 resolve: {
  extensions: ['.js','.css', '.scss', '.html'],
 },

 module: {
  rules: [
   {
    test: /\.html$/,
    loader: 'html-loader'
   },
   {
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    loader: 'file-loader?name=assets/[name].[hash].[ext]'
   },
   {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
     fallbackLoader: 'style-loader',
     loader: ['css-loader?minimize!postcss-loader']
    })
   },
   {
    test: /\.(scss|sass)$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: ['css-loader?minimize','postcss-loader', 'sass-loader']
     })
   }
  ]
 },

 plugins: [
  new ExtractTextPlugin({
      filename: '[name].[contenthash:5].css',
      allChunks: true
    })
 ]
};

需要注意的是:配置scss编译的loader是从右到左执行:

  1. 先执行sass-loader ,把scss文件编译为css
  2. 接着执行postcss-loader,为css添加兼容相关的前缀
  3. 最后执行css-loader,在css-loader后加了minimize参数,是为了压缩css
  4. 如果失败,默认执行style-loader