我是Vue的新手,似乎无法成功通过Webpack将PurifyCSS添加到我的Vue CLI 3项目中。
我正在使用Bootstrap和Scss,我想通过删除未使用的选择器来减小Bootstrap的大小。我已经尝试了上百万种配置组合,但似乎无法使其工作。
这是我的vue.config.js的webpack部分:
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new PurifyCSSPlugin({
paths: glob.sync([
path.join(__dirname, "dist/*.css")
])
})
]
},
这是我得到的错误:
Error: Path C:/Users/klas.tarnstrom/Desktop/vue-test-cli/dist/1.43d93af5.css does not exist.
at C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\purifycss-webpack\dist\index.js:52:50
at Array.forEach (<anonymous>)
at C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\purifycss-webpack\dist\index.js:51:35
at SyncHook.eval [as call] (eval at create (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\HookCodeFactory.js:17:12), <anonymous>:11:1)
at SyncHook.lazyCompileHook [as _call] (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\Hook.js:35:21)
at Compiler.newCompilation (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:503:30)
at hooks.beforeCompile.callAsync.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:540:29)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\Hook.js:35:21)
at Compiler.compile (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:535:28)
at readRecords.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:274:11)
at Compiler.readRecords (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:402:11)
at hooks.run.callAsync.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:271:10)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\tapable\lib\Hook.js:35:21)
at hooks.beforeRun.callAsync.err (C:\Users\klas.tarnstrom\Desktop\vue-test-cli\node_modules\webpack\lib\Compiler.js:268:19)
答案 0 :(得分:0)
我想您没有正确配置路径:
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync([
path.join(__dirname, './src/index.html'),
path.join(__dirname, './**/*.vue'),
path.join(__dirname, './src/**/*.js')
])
})
此外,我不确定您为什么需要此插件:MiniCssExtractPlugin