1

我是 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)
4

1 回答 1

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

于 2018-09-13T09:15:12.353 回答