Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

如果你想知道Nuxt中如何使用可以看《Nuxt项目如何配置使用Sass/postcss-px2rem/webpack-spritesmith》

背景

前段时间，我由 重构/UI开发 转岗前端开发，之前直接在重构自己的目录下输出静态CSS样式和HTML，现在变成直接在Vue-Cli 3.0 脚手架构建的项目下进行开发，这就需要在现有前端开发流程中整合重构流程。

我们之前重构是通过 gulp、postcss 等工具实现自动化处理及组件化开发，比如样式自动补全（配置浏览器兼容参数）autoprefixer、HTML 文件引入 gulp-file-include、在CSS里实现sass语法、postcss-px2rem、postcss-sprites 等各种功能。最后运行编译生成静态的重构稿给到前端开发，然后开发再根据他自己的想法将项目进行组件划分。这中间可以看到重构的组件划分只是在重构开发过程中起到作用，而开发又要重新拆分一次，浪费了人力和时间，重构的价值没有完全发挥。

所以我们现在将重构流程整合到现有前端开发流程中是非常有好处的，可以减少沟通成本，发挥人才价值。

如何使用Sass

跟 Sass 有关的就两个东西，sass-loader 和 node-sass ，所以我们安装这两个东西，然后在组件中就可以用Sass来写了。

npm install -D sass-loader node-sass

这在Vue 官方文档也是有说明的：https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass

如何整合 postcss-px2rem

如果是移动端项目，基本都会用到 rem 单位，如果我们写了 px 就需要转换一下。当然这和项目采用的适配方案有关，我们目前采用的是 vw+rem 的适配方案。通过给根元素 html 设置 font-size ，用 vw 作单位，其他元素用 rem 作单位，实现自适应。具体适配方案可以看：《移动Web开发基础-利用VW单位适配布局》

现在我们在 Vue-Cli 3.0 构建的项目中如何配置呢？

1. 适配方案需如上所说，其他方案自行类比。
2. 安装 npm install postcss-loader
3. 在项目根目录 src 同级，创建文件 vue.config.js ，因为3.0构建后，webpack配置是通过扩展的形式添加的，不直接操作webpack配置文件了。
4. 引入和配置

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
   
    remUnit: 100
});

module.exports = {
   
    css: {
   
        loaderOptions: {
   
            postcss: {
   
                plugins: [
                    postcss
                ]
            }
        }