版权声明:本文为博主原创文章,未经同意,不得转载。 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.js
webpack 扩展配置
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.