用webpack将多个scss文件打包成一个css文件

初始化项目

新建一个文件夹，然后执行命令

?

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

　　

编写scss文件

新建一个src文件夹，然后将scss文件全部放在里面

以下是我的目录结构

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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文件

?

1 2 3 4 5 6

@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里引入

?

1	import './index.scss';

　　

配置webpack

这时在项目新建一个文件webpack.config.js，这个就是webpack默认的配置文件

编写如下代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

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