Vue：提取 CSS - 没有从子编译器获得结果

Question

我正在尝试编写一个适用于nuxt和vue的vue组件库。

当使用Extract CSS时，我最初遇到的问题是document is not defined。通过阅读，我了解到css-loader网络包设置需要调整以使用不同的模块(不使用document的模块(。

我已经下载了(npm(新的webpack模块(https://webpack.js.org/plugins/mini-css-extract-plugin/)并在没有任何运气的情况下复制了示例代码。

下面是我为每个组件得到的错误示例

error  in ./components/inputs/shared/desc.vue?vue&type=style&index=0&id=08898866&scoped=true&lang=css&
Module build failed (from ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Didn't get a result from child compiler
at childCompiler.runAsChild (B:libnode_modulesmini-css-extract-plugindistloader.js:159:23)
at compile (B:libnode_moduleswebpacklibCompiler.js:343:11)
at hooks.afterCompile.callAsync.err (B:libnode_moduleswebpacklibCompiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (B:libnode_modulestapablelibHook.js:154:20)
at compilation.seal.err (B:libnode_moduleswebpacklibCompiler.js:678:31)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:libnode_modulestapablelibHook.js:154:20)
at hooks.optimizeAssets.callAsync.err (B:libnode_moduleswebpacklibCompilation.js:1423:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:libnode_modulestapablelibHook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (B:libnode_moduleswebpacklibCompilation.js:1414:32)
at _promise0.then._result0 (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:13:1)
at process._tickCallback (internal/process/next_tick.js:68:7)
at runLoaders (B:libnode_moduleswebpacklibNormalModule.js:316:20)
at B:libnode_modulesloader-runnerlibLoaderRunner.js:367:11
at B:libnode_modulesloader-runnerlibLoaderRunner.js:182:20
at context.callback (B:libnode_modulesloader-runnerlibLoaderRunner.js:111:13)
at childCompiler.runAsChild (B:libnode_modulesmini-css-extract-plugindistloader.js:159:14)
at compile (B:libnode_moduleswebpacklibCompiler.js:343:11)
at hooks.afterCompile.callAsync.err (B:libnode_moduleswebpacklibCompiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (B:libnode_modulestapablelibHook.js:154:20)
at compilation.seal.err (B:libnode_moduleswebpacklibCompiler.js:678:31)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:libnode_modulestapablelibHook.js:154:20)
at hooks.optimizeAssets.callAsync.err (B:libnode_moduleswebpacklibCompilation.js:1423:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:libnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:libnode_modulestapablelibHook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (B:libnode_moduleswebpacklibCompilation.js:1414:32)

我已经在互联网上寻找了几个小时，似乎找不到解决方案。

我一直在看API Docshttps://ssr.vuejs.org/guide/build-config.html#server-config，似乎找不到有效的东西。此外，我还删除了node_modules

//vue.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
outputDir: 'dist',
lintOnSave: false,
css: {
extract: true //false
},
configureWebpack: {
devtool: 'source-map',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false
})
],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
resolve: {
alias: {
'@': path.resolve(__dirname)
}
}
}
}

--编辑--这是回购协议的副本：https://github.com/mjmnagy/vue-error-2020-08-26

@sugars提到的问题建议编译nuxt构建过程来创建库。然而，这最终会影响为整个nuxt应用程序编译构建过程的方式(这不是所需的(。相反，在nuxt应用程序中编写了一个组件库(用于更容易地为每个组件创建页面(。我认为vue.config.js需要修改以使用webpack插件进行ssr安全提取。问题是，我找到的每一个教程或文档都不起作用。

感谢

Answer 1

事实上，您不需要在nuxt项目中手动导入迷你css提取插件，它内置了一个提取css块的webpack插件。

使用extract-csschunks-webpack插件，所有css都将被提取到单独的文件中，通常每个组件一个。这允许单独缓存CSS和JavaScript，如果你有很多全局或共享的CSS，值得一试。

您只需要在nuxt.config.js文件中配置build属性。

您可能希望将所有CSS提取到一个文件中。有一个解决方法：

export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}

警告：不建议将所有内容提取到单个文件中。提取到多个css文件中更适合缓存和预加载隔离。它还可以通过只下载和解析那些需要的资源来提高页面性能。