Импорт файла SCSS в компоненты Vue SFC без дублирования с помощью Webpack

Question

Когда я пытаюсь получить доступ к файлу scss во всех моих VFC SFC, стили дублируются, что приводит к сбою больших пакетов CSS и Dev Tools при отладке стиля

Я использую Webpack 4 и webpack-dev-server длясоздавать и запускать службы разработки с горячей перезагрузкой.Я не создавал проект с помощью Vue CLI.

У меня довольно много SFC (~ 50) и файл sass (index.scss), который содержит глобальные стили и переменные.Мне нужно иметь возможность использовать стили и переменные в index.scss для всех моих SFC.Мой текущий подход заключается в использовании опции данных в моем sass-загрузчике Webpack.

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
        },
        {
            test: /\.scss$/,
            use: [
                isDev ? { loader: 'vue-style-loader', options: { sourceMap: hasSM }} : {loader: MiniCssExtractPlugin.loader },
                {   
                    loader: 'css-loader', 
                    options: {
                        sourceMap: hasSM 
                    }
                },
                { 
                    loader: 'sass-loader', 
                    options: { 
                        sourceMap: hasSM, 
                        data: `@import "@/styles/index.scss";`
                    }
                }
            ]
        }
    ]
}

Это успешно, однако я заметил, что мои стили index.scss включены в каждый компонент.Локальная разработка с помощью devserver практически невозможна, поскольку дублирование 50 компонентов настолько велико, что devtools не справляется.Когда я делаю сборку для извлечения CSS, я вижу дублирование и файл app.css огромен.Я могу использовать процесс минимизации для развертываний, но он совсем не подходит для локальной разработки.

Я пробовал другие подходы, такие как удаление параметра данных из sass-загрузчика с помощью import ./styles/index.scss в моем файле main.jsвместо этого, однако, это не удается построить, потому что он не может найти переменные, которые я использую в своих SFC.

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

Answer 1

мне удалось решить.По сути, когда обрабатывался каждый компонент Vue, загрузчик sass импортировал мой глобальный файл sass, который содержал переменные, миксины и, что наиболее важно, мои стили.Оператор import в моем main.js не работает, поскольку переменные и миксины недоступны на момент обработки компонента.

Так что мне нужно только импортировать переменные и миксины в мои компоненты, а стили могут быть внешними и включены в мой main.js.Поскольку переменные и миксины просто включаются при необходимости (с помощью операторов @include), то дублирования не происходит, так как он компилируется в CSS.

Поэтому я разделил стили и переменные и миксины на отдельные переменные

Styles => styles.scss

Variable и Mixins => variableMixins.scss

затем import ./styles/styles.scss в моем main.js

и моем веб-пакете sass-загрузчикебудет похоже на

            { 
                loader: 'sass-loader', 
                options: { 
                    sourceMap: hasSM, 
                    data: `@import "@/styles/variableMixins.scss";`
                }
            }