一、入门级挖坑
在项目中使用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里面配置一个config
postcss.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-css
postcss.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`
}
}