插件大名:PurgeCSS
此篇文檔可以棄用了,新寫了一篇在vue.config.js中配置的文章
描述:一個項目需要很多的css樣式,這樣就避免不了可能會多余一些用不到的css樣式,如果你足夠細心請忽略此篇文章,我最近再弄uniapp項目,是通過vuecli來創建的
文檔所在
-
先說下缺點吧:
使用了這個插件之后就不能肆無忌憚的在uniapp里面使用div等標簽了,要按照uniappview等標簽來寫 -
優點
就是描述所說的能夠幫你把所有多余的樣式清除掉,所謂多的樣式就是dom標簽里面不存在,而css里面寫了這個樣式 -
上圖
-
源碼
-
編譯為小程序
-
我加上標簽
-
-
使用方法(文檔很清晰}),有可能你不知道在哪配置vue,其他的文檔都已經寫上了,vue的寫的比較粗糙vuecli插件使用文檔
//uniapp,由於uniapp的配置文件和vue還是有所不同的,大家還是看文檔吧(這是我的postcss配置)
//
const purgecss = require('@fullhuman/postcss-purgecss');
const path = require('path');
const purgecss = require('@fullhuman/postcss-purgecss');
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
//這里是功能所在,上面配置是無關的
purgecss({
content: [`./public/**/*.html`, `./src/**/*.vue`],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
},
safelist: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/, /data-v-.*/
],
})
]
}