怎么在webpack4中对SCSS进行处理-创新互联
今天就跟大家聊聊有关怎么在webpack4中对SCSS进行处理,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
为满城等地区用户提供了全套网页设计制作服务,及满城网站建设行业解决方案。主营业务为网站制作、成都网站设计、满城网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!1. 准备工作
目录结构
这次我们需要用到node-sass,sass-loader等 LOADER,package.json如下:
{ "devDependencies": { "css-loader": "^1.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "node-sass": "^4.9.2", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "webpack": "^4.16.0" } }
其中,base.scss代码如下:
$bgColor: red !default; *, body { margin: 0; padding: 0; } html { background-color: $bgColor; }
index.html代码如下:
Document
2. 编译打包scss
首先,在入口文件app.js中引入我们的 scss 样式文件:
import "./scss/base.scss";
下面,开始编写webpack.config.js文件:
const path = require("path"); module.exports = { entry: { app: "./src/app.js" }, output: { publicPath: __dirname + "/dist/", path: path.resolve(__dirname, "dist"), filename: "[name].bundle.js" }, module: { rules: [ { test: /\.scss$/, use: [ { loader: "style-loader" // 将 JS 字符串生成为 style 节点 }, { loader: "css-loader" // 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader" // 将 Sass 编译成 CSS } ] } ] } };
需要注意的是,module.rules.use数组中,loader 的位置。根据 webpack 规则:放在最后的 loader 首先被执行。所以,首先应该利用sass-loader将 scss 编译为 css,剩下的配置和处理 css 文件相同。
3. 检查打包结果
因为 scss 是 css 预处理语言,所以我们要检查下打包后的结果,打开控制台,如下图所示:
同时,对于其他的 css 预处理语言,处理方式一样,首先应该编译成 css,然后交给 css 的相关 loader 进行处理。
处理sass文件
1.安装sass和sass-loader
cnpm i node-sass sass-loader -D
创建一个src/sass/a.sass文件
$color:green; #div2{ color: $color; }
module:{ //我写一个module //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则 rules:[ { // test 表示测试什么文件类型 test:/\.css$/, // 使用 'style-loader','css-loader' use:ExtractTextPlugin.extract({ fallback:'style-loader', // 回滚 use:'css-loader', publicPath:'../' //解决css背景图的路径问题 }) }, { test:/\.less$/, use:ExtractTextPlugin.extract({ //分离less编译后的css文件 fallback:'style-loader', use:['css-loader','less-loader'] }) }, { test:/\.(sass|scss)$/, use:['style-loader','css-loader','sass-loader'] }, { test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ // 这里的options选项参数可以定义多大的图片转换为base64 limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径 outputPath:'images' //定义输出的图片文件夹 } }] } ] },
自动添加css前缀
postCss 预处理器
专门处理css平台
1.下载
cnpm i postcss-loader autoprefixer -D
2.准备建一个 postcss.config.js文件 配置postcss的
module.exports = { plugins:[ require('autoprefixer') // 自动添加css前缀 ] }
3.配置postcss-loader,自动添加css前缀
module:{ //我写一个module //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则 rules:[ { // test 表示测试什么文件类型 test:/\.css$/, // 使用 'style-loader','css-loader' use:ExtractTextPlugin.extract({ fallback:'style-loader', // 回滚 use:[ {loader:'css-loader'}, {loader:'postcss-loader'} //利用postcss-loader自动添加css前缀 ], publicPath:'../' //解决css背景图的路径问题 }) }, { test:/\.less$/, use:ExtractTextPlugin.extract({ //分离less编译后的css文件 fallback:'style-loader', use:['css-loader','less-loader'] }) }, { test:/\.(sass|scss)$/, use:['style-loader','css-loader','sass-loader'] }, { test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ // 这里的options选项参数可以定义多大的图片转换为base64 limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径 outputPath:'images' //定义输出的图片文件夹 } }] } ] },
自动消除冗余的css代码
使用Purifycss
1.下载
cnpm i purifycss-webpack purify-css -D
2.引入插件
const PurifyCssWebpack = require('purifycss-webpack');
3.需要引入一个额外模块,glob扫描路径
cnpm i glob -D
4.引入glob
const glob = require('glob');
5.在plugins里面配置
plugins:[ // Uglify是压缩js,现在已经不需要了,只需要在script里面写成 // "build": "webpack --mode production", 就自动压缩额 //new Uglify(), new Webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ title:'Hello World', template: './src/index.html' //模板地址 }), new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面 new PurifyCssWebpack({ //消除冗余代码 // 首先保证找路径不是异步的,所以这里用同步的方法 // path.join()也是path里面的方法,主要用来合并路径的 // 'src/*.html' 表示扫描每个html的css paths:glob.sync(path.join(__dirname,'src/*.html')) }) ]
看完上述内容,你们对怎么在webpack4中对SCSS进行处理有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
分享名称:怎么在webpack4中对SCSS进行处理-创新互联
标题来源:http://pwwzsj.com/article/ppoco.html