Добавить файл SCSS в приложение VueJS, но не каждый компонент - PullRequest
Новая
       41

Добавить файл SCSS в приложение VueJS, но не каждый компонент

1 голос
/ 19 июня 2019

У меня такое чувство, что я слишком много думаю об этом, но я не могу найти то, что я ищу в этом паттерне.

У меня есть приложение VueJS с несколькими компонентами, и все это работает.Я использую style-resources-loader для добавления моих глобальных переменных и миксинов и тому подобного в каждый компонент.Это работает как задумано.

module.exports = {
    pluginOptions: {
       'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
              path.resolve(__dirname, './src/styles/variables.scss'),
              path.resolve(__dirname, './src/styles/text-mixins.scss'),
              path.resolve(__dirname, './src/styles/interactive-mixins.scss'),
            ],
        }
    },
}

У меня также есть таблица стилей на уровне приложения.Сброс, общие макеты и т. Д. Это не то, что я хочу включить в обработку SCSS каждого компонента, а просто то, что я хочу получить в окончательном CSS для приложения.

Все, что я нахожу, когда ищу "как«Добавить файл SCSS в Vue» - это все о загрузчике ресурсов для обработки компонента. Я не могу включить глобальные стили таким образом, а затем полагаюсь на дедупликацию для удаления посторонних - импортированные глобальные стили ограничиваются встроенной областью видимости компонента, которая вызывает раздувание и, как правило, плохоpattern.

Мне также не нужна отдельная сборка Webpack и файл CSS в качестве конечного продукта, если я могу избежать этого.

Я могу поместить это внутрь, скажем, в блок стиля приложения корневого уровня, но это не лучшее место для работы с CSS на уровне страницы.Было бы идеально, если бы этот набор файлов SCSS был отделен от компонентов, но был частью компиляции SCSS приложения Vue.

Обновление

У меня был большой блок вещей, не уверен, как он попал в это состояние, но сейчас это не так, и я не могу его воссоздать.

1 Ответ

1 голос
/ 19 июня 2019

Киньте их в вашу точку входа.Буквально включить scss в начале.Например, в файле app.ts или app.js: 

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' <-- like this

Vue.use(Buefy)

Если ваш веб-пакет настроен правильно, например, Vue cli, тогда не имеет значения, как найти scss.Это только введет это глобально.Компоненты Vue также являются глобальными, если вы не укажете scss.

Пример из https://buefy.org/documentation/start/

...