title: Nuxtjs how to configure webpack for npm run generate when importing css file for component?
body: <p>Note: I know almost no webpack, but have been googling trying to figure this out.</p>
  
  <p>I have a simple vue component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="d-appendix"&gt;
      &lt;slot&gt;&lt;/slot&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  }
  &lt;/script&gt;
  
  &lt;style src='../styles/d-appendix.css'&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>and the css file is:
  and the css</p>
  
  <pre class="lang-css prettyprint-override"><code>.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 &gt; * {
    grid-column: text;
  }
  
  .d-appendix &gt; .d-footnote-list,
  .d-appendix &gt; .d-citation-list,
  .d-appendix &gt; .distill-appendix {
    grid-column: screen;
  }
  </code></pre>
  
  <p>running <code>npm run generate</code> throws:</p>
  
  <pre><code>ERROR in ./styles/d-appendix.css?vue&amp;type=style&amp;index=0&amp;lang=css&amp; (./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&amp;type=style&amp;index=0&amp;lang=css&amp;)
  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&amp;type=style&amp;index=0&amp;lang=css&amp; (./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&amp;type=style&amp;index=0&amp;lang=css&amp;) 4:14-253
   @ ./styles/d-appendix.css?vue&amp;type=style&amp;index=0&amp;lang=css&amp;
   @ ./components/DAppendix.vue
   @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./pages/index.vue
   @ ./.nuxt/router.js
   @ ./.nuxt/index.js
   @ ./.nuxt/client.js
   @ multi ./.nuxt/client.js
  </code></pre>
  
  <p>I did some googles, and tried changing <code>nuxt.config.js</code> to have </p>
  
  <pre class="lang-js prettyprint-override"><code>// 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,
          }
        })
  </code></pre>
  
  <p>This now gives me:</p>
  
  <pre><code>ERROR in ./.nuxt/components/nuxt-loading.vue?vue&amp;type=style&amp;index=0&amp;lang=css&amp; (./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&amp;type=style&amp;index=0&amp;lang=css&amp;)
  Module build failed (from ./node_modules/postcss-loader/src/index.js):
  SyntaxError
  
  (1:1) Unknown word
  
  &gt; 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", ""]);
  </code></pre>
  
  <p>How do I get my css import to work?</p>
  
  <p><a href="https://gitlab.com/SumNeuron/vdistill" rel="nofollow noreferrer">Repo</a></p>