如果你想知道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 构建的项目中如何配置呢？
- 适配方案需如上所说，其他方案自行类比。
- 安装
npm install postcss-loader - 在项目根目录
src同级，创建文件vue.config.js，因为3.0构建后，webpack配置是通过扩展的形式添加的，不直接操作webpack配置文件了。 - 引入和配置
const px2rem = require('postcss-px2rem');
const postcss = px2rem({
remUnit: 100
});
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
如何使用 webpack-spritesmith
在网上找了很多，插件官方文档也仔细看了，还是没看明白这个插件在 vue.config.js 里如何配置，因为根本就不一样了，Vue官方文档说要在 configureWebpack 这个对象下进行配置，网上都是在 plugins 里配置，显然不满足需求。经过摸索，最终实现。
- 安装
npm install --save-dev webpack-spritesmith - 在
assets>img目录下新建spr文件夹，里面放需要合并雪碧图的素材，合并之后会生成一张雪碧图和一个样式文件。 vue.config.jswebpack 配置
var path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');
// 雪碧图样式处理模板
var templateFunction = function (data) {
var shared = '.icon { display:inline-block; background-image: url(I); background-size:WSMpx HSMpx; }'
.replace('I', data.sprites[0].image)
.replace('WSM', data.spritesheet.width)
.replace('HSM', data.spritesheet.height);
var perSprite = data.sprites.map(function (sprite) {
return '.icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
.replace('N', sprite.name)
.replace('W', sprite.width)
.replace('H', sprite.height)
.replace('X', sprite.offset_x)
.replace('Y', sprite.offset_y);
}).join('\n');
return shared + '\n' + perSprite;
};
module.exports = {
configureWebpack: {
resolve: {
modules: [
'node_modules',
'assets/img' //css在哪里能找到sprite图
]
},
plugins: [
// 雪碧图设置
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, './src/assets/img/spr/'), // 图标根路径
glob: '**/*.png' // 匹配任意 png 图标
},
target: {
image: path.resolve(__dirname, './src/assets/img/spr.png'), // 生成雪碧图目标路径与名称
// 设置生成CSS背景及其定位的文件或方式
css: [
[path.resolve(__dirname, './src/assets/scss/spr.scss'), {
format: 'function_based_template'
}]
]
},
customTemplates: {
'function_based_template': templateFunction,
},
apiOptions: {
cssImageRef: "~spr.png", // css文件中引用雪碧图的相对位置路径配置
},
spritesmithOptions: {
padding: 10,
}
})
]
}
}
说明：
- 雪碧图样式处理模板函数里面可以定义样式的输出格式，这里我是统一类名
icon，某个图标对应的类名icon-图片名 - 在配置文件里可以设置输出的路径和文件命名，这里我是命名
spr.png、spr.scss - 目前有一个问题是，当
spr文件夹下没有需要合并的雪碧图是，编译会报错，同时生成一个无效的图片，我尝试在配置文件里加条件判断，但是一直不成功，希望有大佬看到能帮忙解答下，感谢。 - 生成的样式文件如下：
.icon { display:inline-block; background-image: url(~spr.png); background-size:584px 497px; }
.icon-que01 { width: 174px; height: 156px; background-position: 0px 0px; }
.icon-que02 { width: 129px; height: 159px; background-position: -356px -100px; }
.icon-que03 { width: 162px; height: 162px; background-position: 0px -166px; }
- 使用
<i class="icon icon-que01"></i> spritesmithOptions是设置图片之间的间距（留白），避免rem适配带来的计算误差问题。
总结
至此，我们就可以愉快的重构了，直接在vue组件中写结构和样式。同时，作为一个前端开发，也可以同时把逻辑体现在数据结构和HTML结构上了。开心ing~~
后面会再分享在Nuxt项目中，如何整合重构流程，也就是今天分享的这三个内容。
END.