Как правильно импортировать CSS-модули с помощью Nuxt? - PullRequest
Новая
       73

Как правильно импортировать CSS-модули с помощью Nuxt?

0 голосов
/ 17 марта 2019

Я использую CSS-модули с Nuxt и столкнулся с некоторыми проблемами при попытке импортировать таблицу стилей в js. Если я импортирую свою таблицу стилей непосредственно в ... 

`<style module>
   @import './index.css';
</style>`

... все работает как положено. В моем конкретном случае мне нужно запустить вычисляемое свойство, чтобы выбрать между двумя различными таблицами стилей, поэтому вместо импорта через <style module> мне нужно импортировать в <script> и реализовать стили следующим образом: 

<script>
import foo from './index.css'
export default {
  computed: {
    styles() {
      return foo
    }
  }
}
</script>

При реализации этого в vue все работает отлично, и я возвращаю объект стиля. Однако Nuxt возвращает пустой объект, и ни один из моих стилей не отображается правильно.

Я активирую CSS-модули в моем файле nuxt.config.js следующим образом: 

export default {
  ...
    loaders: {
      css: {
        modules: true
      }
    }
  ...
}

Это проблема с Nuxt SSR? Я искал основную причину / решение, но мне не повезло в моем поиске.

Обновление

После принятия совета ivandata и добавления в мой скрипт сборки этот код: 

export default {
  ....
  build: {
    extend (config, ctx) {

      const cssLoader = config.module.rules.find(rule => {
        return rule.test.toString() === '/\\.css$/i';
      });

      delete cssLoader.oneOf[0].resourceQuery;

      ...
    }
  }
}

Модули CSS работают, но возникла новая проблема, заключающаяся в том, что теперь проект не понимает стилей vue-компонентов, которые не являются css-модулями. Проведя небольшое исследование, я обнаружил, что resourceQuery сообщает загрузчику, к какому типу файлов применять параметры загрузчика.

Я попытался покопаться в загрузчике стилей на vue.cli 3 и сравнить различия с Nuxt. Я удалил фрагмент кода ivandata и попытался сопоставить загрузчики vue и nuxt, но проблема все еще сохранялась.

Вот что происходит визуально между включением и выключением кода ivandata:

Disabled enter image description here

Включено enter image description here

А вот фрагмент кода того, что происходит в моем проекте: 

<template>
  <section :class="style.container">
    <h1>hey</h1>
    <h2 class="test">hey</h2>
  </section>
</template>

<script>
import style from './index.css'
export default {
  computed: {
    style() {
      return style
    }
  }
}
</script>

<style>
  h1 {
    font-size: 100px;
  }

  .test {
    font-size: 100px;
  }
</style>

Итак, как вы можете видеть, если у меня есть resourceQuery в загрузчике css, мой импорт javascript из css не работает, но все стили vue-компонентов работали как обычно. После удаления resourceQuery импортированная таблица стилей js работает, но классы стилей vue-template больше не работают. Я не думаю, что решение заключается в удалении resourceQuery, и мне любопытно, связано ли это как-то с другим загрузчиком. Я немного покопался в загрузчиках vue.cli 3 и не вижу ничего, что мне отчетливо выделяется.

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Хорошо, это по-другому. Оставьте свой старый код. Удалить мой код и добавить? Модуль для импорта пути к файлу: 

<script>
  import foo from './index.css?module'
  export default {
    computed: {
      styles() {
        return foo
      }
    }
  }
</script>

Я был не прав. Параметр resourceQuery используется для проверки раздела запроса в строке запроса.

1 голос
/ 19 марта 2019

Вам не нужно активировать css-модули в nuxt, они активны по умолчанию. Nuxt.js использует vue-style-loader для загрузки стилей. https://vue -loader.vuejs.org / руководство / CSS-modules.html # неавтоматического-использования По умолчанию все стили загружаются из тега стиля с атрибутом модуля, поскольку загрузчик стилей использует resourceQuery / module / в правиле oneOf. Поэтому, если удалить это свойство, nuxt будет загружать стили, как вы хотите. 

export default {
  ....
  build: {
    extend (config, ctx) {

      const cssLoader = config.module.rules.find(rule => {
        return rule.test.toString() === '/\\.css$/i';
      });

      delete cssLoader.oneOf[0].resourceQuery;

      ...
    }
  }
}
...