用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