Блог

Главная - Вопросы по программированию - Как интегрировать пользовательский файл SASS и SFC Vue3 (Vue CLI)

Как интегрировать пользовательский файл SASS и SFC Vue3 (Vue CLI)

#css #vue.js #sass #vue-cli-4

#css #vue.js #sass #vue-cli-4

Вопрос:

У меня есть архитектура SASS, в которой я размещаю все свои стили. У меня есть только один файл SASS, который импортирует все части (включая переменные, микширование и т. Д.). Я хотел бы знать, как я могу получить доступ ко всем этим стилям в каждом SFC, которые предлагает нам Vue, чтобы я мог использовать микшины, переменные и многое другое в моем SFC.

Наконец, как это должно быть обработано? Берем все стили SCSS и SFC и выводим один файл CSS? или с помощью загрузчика стилей? Я использую Vue-CLI 4 и Vue.js 3.

Вот как моя архитектура выглядит до сих пор:

введите описание изображения здесь

Комментарии:

1. Была ли проблема при попытке использовать переменные в ваших компонентах?

2. Да, так оно и было. На самом деле ни один из стилей, которые я определил в папке SASS, не работал, но теперь я решил проблему.

3. Хм, обычно для них не требуется сторонний плагин. Вполне возможно, что загрузчик sass настроен неправильно

4. cli.vuejs.org/guide/css.html#automatic-imports

5. Спасибо, да, кажется, что этот инструмент рекомендуется для автоматического импорта (хотя он скрывает, какие файлы импортируются, усложняет конфигурацию и требует дополнительного пакета, который может получать или не получать обновления). Мой комментарий был больше о том, что нет необходимости использовать сторонний инструмент, чтобы заставить ваш SASS работать.

Ответ №1:

Эта проблема была решена с помощью автоматического импорта. Благодаря этому у нас есть доступ ко всем переменным, миксинам и т. Д. В каждом SFC.

Сначала вы устанавливаете style-resources-loader с помощью команды vue add style-resources-loader , которая спросит вас, какой препроцессор вы используете.

После этого вы должны сообщить загрузчику, где находится файл / файлы, которые вы хотите импортировать в каждом SFC. Вы достигаете этого, изменяя vue.config.js (если у вас его еще нет, создайте его в корне вашего проекта). Затем вы добавляете:

 const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'scss',
      'patterns': [
        path.resolve(__dirname, './src/sass/global.scss'),
      ]
    }
  }
}