一. CSS文件基本处理需求假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括:
二. 解决方案的升级
三. 基本使用方法3.1 常用插件及功能简述以
3.2 webpack的配置本篇不是 const HtmlWebpackPlugin = require('html-webpack-plugin');//用于自动生成html入口文件的插件 const MiniCssExtractPlugin = require("mini-css-extract-plugin");//将CSS代码提取为独立文件的插件 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");//CSS模块资源优化插件 module.exports = { mode:'development', entry:'./main.js', output:{ filename:'main.bundle.js', path:__dirname + '/build' }, module: { rules: [ { test: /\.scss$/, exclude: /node_modules/, //排除node_modules文件夹 use: [{ loader: MiniCssExtractPlugin.loader//建议生产环境采用此方式解耦CSS文件与js文件 },{ loader: 'css-loader',//CSS加载器 options: {importLoaders: 2}//指定css-loader处理前最多可以经过的loader个数 },{ loader: 'postcss-loader',//承载autoprefixer功能 },{ loader: 'sass-loader'//SCSS加载器,webpack默认使用node-sass进行编译 } ] } ] }, plugins:[ new HtmlWebpackPlugin(),//生成入口html文件 new MiniCssExtractPlugin({ filename: "[name].css" })//为抽取出的独立的CSS文件设置配置参数 ], optimization:{ //对生成的CSS文件进行代码压缩 mode='production'时生效 minimizer:[ new OptimizeCssAssetsPlugin() ] } }
module.exports = { plugins:[ require('autoprefixer') ] }
"browerslist": [ "last 2 versions", "IE 8", "UCAndroid" ] 编写一段待 //变量定义 $grey: #1e1e1d; $yellow: #ffad15; $offwhite: #f8f8f8; $darkerwhite: darken($offwhite, 15);//SCSS函数 $baseFontSize:14px; //循环 @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //mixin @mixin px2rem($name, $px){ #{$name}: $px / $baseFontSize * 1rem; } //嵌套 .class3{ font-weight: bold; display:flex; &-small{ color: $offwhite; @include px2rem('font-size',14px); } } //autoprefixer ::placeholder{ width:10px; } 可以看到转换后的结果: 提示:代码压缩等优化功能在4.0版本中默认当mode : 'production'时有效。 四. 使用CSS-Modules项目地址:CSS Modules开源地址 CSS Module在CSS中使用类选择器,其基本原理是将CSS代码中的样式名替换为哈希值,并建立一个 在webpack中使用 开启模块化功能后再进行打包,可以看到同样的 而在打包文件中增加了如下片段: 当然 五. 图解Css-Process-Chain从上述配置中可以看出,使用预编译器编写的样式文件需要经过一系列
|
|