Javascript Nuxtjs在导入组件的css文件时如何为npm运行生成配置网页包？

注：我几乎不知道任何网页，但我一直在谷歌上寻找答案

我有一个简单的vue组件：

<template>
  <div class="d-appendix">
    <slot></slot>
  </div>
</template>

<script>
export default {
}
</script>

<style src='../styles/d-appendix.css'>
</style>

运行

npm run generate

抛出：

ERROR in ./styles/d-appendix.css?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./styles/d-appendix.css?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

    at validateOptions (/Users/sumner/Projects/vdistill/frontend/node_modules/css-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
    at Object.loader (/Users/sumner/Projects/vdistill/frontend/node_modules/css-loader/dist/index.js:44:28)
 @ ./styles/d-appendix.css?vue&type=style&index=0&lang=css& (./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./styles/d-appendix.css?vue&type=style&index=0&lang=css&) 4:14-253
 @ ./styles/d-appendix.css?vue&type=style&index=0&lang=css&
 @ ./components/DAppendix.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

我在谷歌上搜索了一下，并尝试将

numxt.config.js

更改为

//内部构建
扩展（配置，ctx）{
config.module.rules.push({
测试：/\.css$/,，
加载器：“css加载器”，
选项：{
模块：对，
localIdentName:“[local]-[hash:base64:5]”，
进口：对，
进口装载机：对，
}
})

现在，这给了我：

ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/dist/runtime/api.js")(false);
    | ^
  2 | // Module
  3 | exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.nuxt-progress {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  height: 2px;\n  width: 0%;\n  opacity: 1;\n  transition: width 0.1s, opacity 0.4s;\n  background-color: #fff;\n  z-index: 999999;\n}\n\n.nuxt-progress.nuxt-progress-notransition {\n  transition: none;\n}\n\n.nuxt-progress-failed {\n  background-color: red;\n}\n", ""]);

如何让css导入工作

我为此创建了一个示例。这些链接似乎包含过时的导入语法。您不需要配置Nuxt来加载css。默认情况下，它已经配置为加载css

您只需执行以下操作：

<script>
import foo from "../css/custom.css";
export default {
computed: {
    styles() {
      return foo
    }
  }
}
</script>

从“./css/custom.css”导入foo；
导出默认值{
计算：{
样式（）{
返回foo
}
}
}

奇怪的错误，我认为这与

尝试导入

@import'../styles/d-appendix.css'

@lawrencerone我使用了

src

，因为我也使用组件进行汇总。根据我的经验，

导出默认值{css:['../styles/d-appendix.css']}

这就是导入css的方式。@Eldar那么这是一个空脚本吗？不小心按了回车键，对不起。