一、入门级挖坑

在项目中使用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'
    )
]