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

【问题标题】：Nuxtjs how to configure webpack for npm run generate when importing css file for component?Nuxtjs如何在为组件导入css文件时为npm run generate配置webpack？
【发布时间】：2020-03-26 11:20:09
【问题描述】：

注意：我几乎不知道 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

【问题讨论】：

奇怪的错误，我认为它与 <style src='../styles/d-appendix.css'> 尝试导入 <style>@import '../styles/d-appendix.css'</style>
@LawrenceCherone 我使用了src，因为我也使用组件进行汇总。根据我的经验，导入不适用于汇总
export default { css :[ '../styles/d-appendix.css'] } 这就是你导入css的方式。
@Eldar 所以它是一个空脚本？
不小心按回车抱歉。

标签： javascript css webpack vuejs2 nuxt.js

【解决方案1】：

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

你所要做的就是如下：

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

【讨论】：