版权声明：本文为博主原创文章，未经同意，不得转载。 https://blog.csdn.net/u013778905/article/details/84995498
接上篇《Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith》
如果Vue项目考虑实现SSR服务端渲染的话，Nuxt是很好的选择，Nuxt帮我们做了很多工作，让我们实现SSR就像配置一样简单。
还是同样的问题，如果需要在Nuxt项目开发过程中整合重构流程该怎么做？
如何使用Sass
跟 Sass 有关的就两个东西，sass-loader 和 node-sass ，所以我们安装这两个东西，然后在组件中就可以用Sass来写了。
npm install -D sass-loader node-sass
如何整合 postcss-px2rem
如果是移动端项目，基本都会用到 rem 单位，如果我们写了 px 就需要转换一下。当然这和项目采用的适配方案有关，我们目前采用的是 vw+rem 的适配方案。通过给根元素 html 设置 font-size ，用 vw 作单位，其他元素用 rem 作单位，实现自适应。具体适配方案可以看：《移动Web开发基础-利用VW单位适配布局》
现在我们在 Nuxt 构建的项目中如何配置呢？
- 适配方案需如上所说，其他方案自行类比。
- 安装
npm install postcss-loader - 配置
nuxt.cofig.js
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 100
})
]
}
如何使用 webpack-spritesmith
- 安装
npm install --save-dev webpack-spritesmith - 在
assets>img目录下新建spr文件夹，里面放需要合并雪碧图的素材，合并之后会生成一张雪碧图和一个样式文件。 nuxt.cofig.jswebpack 扩展配置
build: {
extend(config, ctx) {
//如果是开发环境而且在客户端中执行
if (ctx.isDev && ctx.isClient) {
// 雪碧图插件
let path = require('path');
let SpritesmithPlugin = require('webpack-spritesmith');
// 雪碧图处理模板
let templateFunction = function (data) {
let 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);
let 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;
};
// 雪碧图扩展webpack配置
config.resolve.modules.push('./assets/img'); //css在哪里能找到sprite图
config.plugins.push(
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, './assets/img/spr/'), // 图标根路径
glob: '**/*.png' // 匹配任意 png 图标
},
target: {
image: path.resolve(__dirname, './assets/img/spr.png'), // 生成雪碧图目标路径与名称
// 设置生成CSS背景及其定位的文件或方式
css: [
[path.resolve(__dirname, './assets/scss/spr.scss'), {
format: 'function_based_template'
}]
]
},
customTemplates: {
'function_based_template': templateFunction,
},
apiOptions: {
cssImageRef: "~assets/img/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~~
END.