Vue Cli 3 Машинопись. Невозможно импортировать css / sass в блок ‹script›

Я создал новое приложение vue с машинописным текстом, используя Vue Cli 3.

Когда я пытаюсь импортировать css или sass в свой файл машинописного текста:

импортировать * как sassStyles из '@ / assets / sass / my.module.scss';

У меня следующая ошибка:

Не могу найти модуль

Я нашел эту статью Как использовать модули CSS с TypeScript и webpack, но я понятия не имею, как интегрировать его с Vue Cli 3, который абстрагируется от конфигурации webpack.

Есть идеи, что добавить в vue.config.js, чтобы иметь возможность напрямую импортировать файлы css и sass для блокировки?

Мне нужно использовать typings-for-css-modules-loader вместо css-loader.


webpack typescript vue.js vue-cli typescript2.0
person pszkv    schedule 15.07.2018    source источник
comment
Зачем нужна ссылка на импортированные стили? (т.е. sassStyles)   -  person tony19    schedule 16.07.2018

Ответы (3)


arrow_upward
2
arrow_downward

Создайте файл в своем проекте, скажем ambient.d.ts (мое соглашение, но вы можете называть его как угодно), со следующим:

declare module "@/assets/sass/*.scss" {
  const styles: any;
  export = styles;
}

declare module "@/assets/css/*.css" {
  const styles: any;
  export = styles;
}

настройте тип и форму экспорта в соответствии с вашим использованием.

person Aluan Haddad    schedule 15.07.2018
comment
Спасибо, но этот подход у меня не работает. Все та же проблема. - person pszkv; 15.07.2018
comment
Сработало для меня как шарм! :) - person Étienne; 07.11.2019

arrow_upward
2
arrow_downward

Попробуйте добавить новый файл с именем vue.config.js в корневой каталог вашего проекта.

В файл добавьте следующее содержимое:

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: [
          path.resolve(__dirname, 'PATH_TO_WHERE_YOUR_SCSS_FILES_ARE'),
        ],
      },
    },
  },
};

Я столкнулся с аналогичной проблемой, когда пытался импортировать файлы scss из @material, который находится в node_modules/@material, после двух дней копания я нашел этот Github issue и попробовал, я использовал 'node_modules' как PATH_TO_WHERE_YOUR_SCSS_FILES_ARE, и это решило мою проблему.

person kevguy    schedule 28.08.2018

arrow_upward
1
arrow_downward

Импорт самого файла (т.е. import '@/foo.scss') автоматически применит стили к текущему компоненту, поэтому вам фактически не нужна ссылка на импортированные стили. То есть:

// import * as sassStyles from '@/assets/sass/my.module.scss'; // DON'T DO THIS
import '@/assets/sass/my.module.scss';

демонстрация

Единственные шаги, необходимые для добавления поддержки импорта файлов Sass в проект vue-cli 3.x, - это установка node-sass и sass-loader (дополнительная настройка не требуется):

npm i -S node-sass sass-loader

Затем вы можете использовать любой из следующих методов для импорта файла .scss:

‹script› импорт:

<script>
  import '/path/to/foo.scss';
</script>

‹стиль src›:

<style scoped src="/path/to/foo.scss" lang="scss"></style>

Обратите внимание, что необязательный атрибут scoped заставляет стили применяться только к текущему компоненту (как модули CSS).

person tony19    schedule 16.07.2018