Внедрить глобальные переменные в vue-компоненты с помощью webpack и style-resource-loader - PullRequest
Новая
       15

Внедрить глобальные переменные в vue-компоненты с помощью webpack и style-resource-loader

0 голосов
/ 08 ноября 2019

У меня есть несколько глобальных переменных в ./src/assets/styles/_globals.scss. Теперь я хочу добавить их ко всем Vue-компонентам, чтобы иметь возможность использовать переменные в стилях области действия.

Я использую Gridsome, для которого это прекрасно работает со следующей конфигурацией: 

const path = require('path')

function addStyleResource (rule) {
  rule.use('style-resource')
      .loader('style-resources-loader')
      .options({
        patterns: [
          path.resolve(__dirname, './src/assets/styles/_globals.scss'),
        ],
      })
}

module.exports = {
  siteName: 'Gridsome',
  plugins: [],
  chainWebpack (config) {
    // Load variables for all vue-files
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']

    // or if you use scss
    types.forEach(type => {
      addStyleResource(config.module.rule('scss').oneOf(type))
    })
  }
}

Кроме того, я использую StoryBook для просмотра веб-страниц со всеми моими компонентами. Это моя конфигурация: 

module.exports = async ({config, mode}) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../src/assets/styles/'),
    });

    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', {
            loader: 'style-resources-loader',
            options: {
                patterns: [
                    path.resolve(__dirname, './src/assets/styles/_globals.scss'),
                ],
                type: ['vue-modules', 'vue', 'normal-modules', 'normal']
            }
        }],
        include: path.resolve(__dirname, './src/assets/styles/_globals.scss')
    });

    return config;
};

Конфигурация не выдает ошибок, но используемые scss-переменные в моих стилях областей действия в моих VueComponents не могут быть проанализированы / найдены.

Как я могу опубликовать эти глобальные стили для всех моих компонентов?

Моя структура папок такая:

* - .storybook - webpack.config.js - src -- assets --- styles ---- _globals.scss - компоненты --- // Все мои Vue-компоненты

...