一、入門級挖坑
在項目中使用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`
}
}