webpack -- css的loader挖坑

一、入门级挖坑

在项目中使用css的第一步，就是要在webpack里面配置相应的解析loader，因为webpack只能解析js文件，对于.css，.vue，.jsx，.json等这些文件它不会读，所以我们要安装loader来帮助一下 所有loader都是在webpack.config.js文件里的module.rules数组里面配置的Tips 每个loader都有基本都有两个配置项：test：正则表达式校验loader/use：loader后面可以是loader数组，也可以是loader字符串，推荐使用use 还可以使用options来额外配置一些属性：如：

{ test: /\.jpg$/, use: [ loader: 'url-loader', options: { limit: 1024, name: '[name].[ext]' } ] } npm install css-loader style-loader --save-dev

安装完成后，需要在webpack.config.js的plugins里面配置，否则也没有效果 注意根据vue官方文档，style-loader被替换成了vue-style-loader，虽然用style-loader也能成，不过还是照着官方来吧

plugins: [ rules: [ { // 正则校验.css后缀的文件 test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', sourceMap: true } ] } ] ]

css-loader就是用来解析处理css文件的，style-loader不知道，估计应该是用来处理style标签里面的css样式的，（主要 将css 插入到head 的style 标签中内联） cssnano是用来压缩css文件的，不过看网上说使用webpack，css-loader自带了，不需要配置，不知道真假，不过后面会提到一个自动插件工具，里面说有一个cssnano 正常按照官方说法，是通过安装uglifyjs-webpack-plugin插件可以实现压缩，不过翻阅网上资料，也有说要安装插件来压缩css的，不管如何，先操作一番试试安装插件

// 注意这个针对webpack 4.0及以上 npm install optimize-css-assets-webpack-plugin cssnano --save-dev // webpack 4.0一下要带版本号 optimize-css-assets-webpack-plugin@3.2.0

安装完插件后，需要在webpack.config.js的插件里面配置一下

// 引入插件 const OptimizeCss = require('optimize-css-assets-webpack-plugin') const cssnano = require('cssnano') plugins: [ new OptimizeCss({ assetNameRegExp: /\.style\.css$/g, cssProcessor: cssnano, cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true, }) ], optimization: { minimizer: [new OptimizeCss({})], }

大致插件配置就是这样，具体选项意思大概如下：

assetNameRegExp：一个正则表达式，指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g cssProcessor：用于优化\最小化CSS的CSS处理器，默认为cssnano。这应该是一个跟随cssnano.process接口的函数（接收CSS和选项参数并返回一个Promise）。 cssProcessorOptions：传递给cssProcessor的选项，默认为 {} cssProcessorPluginOptions：传递给cssProcessor的插件选项，默认为 {} canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true

二、进阶级挖坑

现在基本上不用最基础的css文件，都会使用预处理器，那么针对预处理器，也要配置相应的loader

1、sass

首先是安装模块

npm install sass-loader node-sass --save-dev

安装好之后就要开始配置，可以在之前的css配置基础上进行，也可以重新配置一个对象

module: { rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } ] }

sass和scss的区别：sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法，你需要向这个 loader 传递选项：

{ loader: 'sass-loader', options: { indentedSyntax: true } }

2、less

首先是安装模块

npm install less less-loader --save-dev

安装好之后就要开始配置，可以在之前的css配置基础上进行，也可以重新配置一个对象

module: { rules: [ { test: /\.less$/, use: [ 'vue-style-loader', 'css-loader', 'less-loader' ] } ] }

3、stylus

首先是安装模块

npm install stylus stylus-loader --save-dev

安装好之后就要开始配置，可以在之前的css配置基础上进行，也可以重新配置一个对象

module: { rules: [ { test: /\.styl(us)?$/, use: [ 'vue-style-loader', 'css-loader', 'stylus-loader' ] } ] }

三、终极挖坑

css中最烦的就是写兼容了，一个样式要加前缀写四五遍，太坑爹了，所以我们可以在webpack里面配置模块来让它自动添加前缀 安装模块

npm install postcss-loader autoprefixer --save-dev

模块安装完成之后，可以在css里面配置

module: { rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { importLoader: 1 // 不知道为什么，就跟着写吧 } }, { loader: 'postcss-loader', options: { sourceMap: true } }, 'sass-loader' ] } ] }

注意这里，autoprefixer之前vue项目是有一个postcss.config.js文件，在这里面配置 但是按照这个配置，似乎并没有看见在哪里引用这个js文件，后面看网上是在optios里面配置一个configpostcss.config.js

// const autoprefixer = require('autoprefixer') module.exports = { plugins: [ require('autoprefixer') ] }

调用：

{ loader: 'postcss-loader', options: { config: { path: 'postcss.config.js' } } }

但是其实也可以在postcss-loader里面配置

{ loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('autoprefixer') ], } }

看网上有说：这个配置main.js里面引入的css找不到，需要配置下面两个，可以试试：

{ test: /\.(sc|c)ss$/, exclude:/node_modules/, // 配置node_module里面的css include:'/src/', // 配置src里面的css }

注意配置完上面的东西，还需要在package.json里面或者postcss.config.js里面配置支持的浏览器，否则可能只会添加-webkit-csspostcss.config.js

module.exports = { plugins: { autoprefixer: { browsers: ['last 7 iOS versions', 'last 3 versions', '> 1%'] } } }

webpack.config.js 添加一个browserslist数组

module.exports = { "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "IOS 7", "last 3 IOS versions" ] }

好了，到这里基本上算是结束，上面代码没有是实操过，不知道结果如何，下面是postcss拓展postcss-cli脚手架 这个脚手架里面包含了很多插件，有兴趣可以看一下gitHub网址

autoprefixer是PostCSS最著名的一款插件，就不过多介绍了，相信同学们都使用过。 postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel） postcss-sprites 自动制作雪碧图，不用手动拼接啦，哈哈哈 cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入) postcss-hash-classname 把转换后的css文件名附上哈希值 pixrem 将rem转换为px postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem） postcss-pxtorem 将px转换为rem

安装脚手架

npm install postcss-cli --save-dev

具体如何使用以后再说，关于上面的css配置这样配置完成后，css是加载在js文件里面的，所有需要分离出来成为一个单独的css文件，具体是使用extract-text-webpack-plugin插件实现分离 插件具体用法不说了，分离之后上面的css配置需要改动一下，这个配置是在生产环境下设置，开发环境不需要

{ test: /\.(sc|c)ss$/, use: ExtractTextWebpackPlugin.extract({ fallback: 'vue-style-loader', use: [ 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true, } }, 'sass-loader' ] }) }

在插件里面输出css配置

plugins: [ new ExtractTextWebpackPlugin( 'styles.[contenthash:8].css' ) ]

一个骚操作 可以在配置loader的时候，在options中通过data来配置全局公共变量，这个变量可以是字符串，也可以一个公共文件，这个是不要引入的

{ test: /\.scss$/, options: { data: `$color: red;` } } // 或者这样 { test: /\.scss$/, options: { data: `global.css` } }

转载于:https://www.cnblogs.com/zjh-study/p/10843787.html

相关资源：JAVA上百实例源码以及开源项目