javascript - Nuxtjs如何在为组件导入css文件时为npm run generate配置webpack？

Question

注意:我对 webpack 几乎一无所知，但一直在谷歌搜索试图弄清楚这一点。

我有一个简单的 vue 组件:

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

<script>
export default {
}
</script>

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

css文件是:和CSS

.d-appendix {
  contain: layout style;
  font-size: 0.8em;
  line-height: 1.7em;
  margin-top: 60px;
  margin-bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0,0,0,0.5);
  padding-top: 60px;
  padding-bottom: 48px;
}

.d-appendix h3 {
  grid-column: page-start / text-start;
  font-size: 15px;
  font-weight: 500;
  margin-top: 1em;
  margin-bottom: 0;
  color: rgba(0,0,0,0.65);
}

.d-appendix h3 + * {
  margin-top: 1em;
}

.d-appendix ol {
  padding: 0 0 0 15px;
}

@media (min-width: 768px) {
  .d-appendix ol {
    padding: 0 0 0 30px;
    margin-left: -30px;
  }
}

.d-appendix li {
  margin-bottom: 1em;
}

.d-appendix a {
  color: rgba(0, 0, 0, 0.6);
}

.d-appendix > * {
  grid-column: text;
}

.d-appendix > .d-footnote-list,
.d-appendix > .d-citation-list,
.d-appendix > .distill-appendix {
  grid-column: screen;
}

运行 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

我做了一些谷歌搜索，并尝试将 nuxt.config.js 更改为

// inside build
  extend (config, ctx) {
       config.module.rules.push({
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[local]--[hash:base64:5]',
          import: true,
          importLoaders: true,
        }
      })

现在这给了我:

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 导入工作？

Repo

Answer 1

我创建了一个 Sandbox例如。这些链接似乎包含过时的导入语法。而且你不需要配置 Nuxt 来加载 css。它已经配置为默认加载 css。

你所要做的就是像下面这样:

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