用webpack將多個scss文件打包成一個css文件

初始化項目

新建一個文件夾，然后執行命令

npm init -y
npm install webpack webpack-cli -D

編寫scss文件

新建一個src文件夾，然后將scss文件全部放在里面

以下是我的目錄結構

node_modules/
src/
  bg/
    bg.scss
  border/
    border.scss
  button/
    button.scss
  color/
    bg.scss
  icon/
  	iconfont/
  	  iconfont.eot
  	  iconfont.svg
  	  iconfont.ttf
  	  iconfont.woff
  	  iconfont.woff2
    icon.scss
  flex/
    flex.scss
  index.scss
  index.js
webpack.config.js  //自己新建

當我們編寫好scss后，要將這些scss打包成一個css文件，這里我們就需要index.scss了，在index.scss里引入其他的scss文件

@import './icon/icon.scss';
@import './flex/flex.scss';
@import './media/media.scss';
@import './bg/bg.scss';
@import './border/border.scss';
@import './tarbar/tarbar.scss';

最后將這個index.scss文件在Index.js里引入

import './index.scss';

配置webpack

這時在項目新建一個文件webpack.config.js，這個就是webpack默認的配置文件

編寫如下代碼

let path = require('path');

let MiniCssExtractPlugin = require('mini-css-extract-plugin');// 抽離css的插件


// development production
module.exports = {
  mode: 'production',  //生產模式，會壓縮代碼，development不會壓縮代碼
  entry: './src/index.js',  //雖然我們打包的是scss，但是入口依然還得是js
  output: {
    path: path.resolve(__dirname, 'build') //打包后的出口
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css",  //打包后的css文件
    })
  ],
    //loader鏈
  module: {
    rules: [
      
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: "resolve-url-loader"  //因為scss-loader沒有重寫url的功能，所以必須安裝這個
          },
          {
            loader: "sass-loader", // 將 Sass 編譯成 CSS
            options: { sourceMap: true }  //必須要寫
          }
        ]
      },
        //如果沒有字體圖標文件，就不需要這個file-loader
      {
        test: /\.(woff|woff2?|svg|ttf|eot)$/,
        use:[
             {loader:'file-loader',options:{outputPath: 'iconfont'}}//項目設置打包到dist下的fonts文件夾下
          ]
      }
    ]
  }
}

安裝對應的loader和插件

總共需要安裝的是

• mini-css-extract-plugin
• css-loader
• resolve-url-loader
• sass-loader
• file-loader

最后執行打包命令npx webpack