Переменные Storybook Global Scss

Вам нужно добавить правило scss в ваш .storybook/webpack.config.js для сборника рассказов для синтаксического анализа scss.

const path = require('path');
const scss = {
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader'
  ],
};
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push(scss);

  return defaultConfig;
};

Также может потребоваться установка соответствующих загрузчиков:

yarn add -D vue-style-loader sass-loader css-loader

Я столкнулся с проблемой, когда глобальные переменные SASS приводили к сбою Storybook для Vue.

Для меня создание файла webpack.config.js в папке .storybook с приведенной ниже конфигурацией решило мою проблему:

module.exports = (storybookBaseConfig, configType, defaultConfig) => {

  defaultConfig.module.rules.push(
    {
      resourceQuery: /module/,
      use: [
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false
          }
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: false,
            importLoaders: 2,
            modules: true,
            localIdentName: '[name]_[local]_[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: false
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: false,
            indentedSyntax: true,
            data: '@import "@/sass/_variables.scss";'
          }
        }
      ]
    }
  );

  return defaultConfig;
};

Обратите внимание, что строка data: '@import "@/sass/_variables.scss";' должна соответствовать пути к файлу SASS с переменными в вашем проекте.

Этот раздел конфигурации был получен из Vue CLI 3 путем запуска vue inspect > output.js и последующего копирования конфигурации для правила test: /\.sass$/.

Если к вашим компонентам не применяются стили при запуске в пользовательском интерфейсе обозревателя компонентов Storybook, просто импортируйте стили SASS в свой основной Storybook config/storybook/config.js (в предыдущих версиях по умолчанию был storybook/config.js) следующим образом:

// Import Styles
import '../../src/assets/styles/index.scss';

Обычно у вас есть свои стили и плагины, импортированные в ваш src/main.js / src/main.ts, но вам также необходимо сделать это в конфигурации Storybook, так как при запуске Storybook запускается не все приложение Vue, а только эти отдельные компоненты.

Кажется, это проблема с Storybook, обрабатывающим несколько правил.

Я решил это обойти.

Вы можете прочитать блог, который я написал для подробного объяснения здесь.

Ниже представлена ​​конфигурация моего веб-пакета - main.js:

webpackFinal: async (config, { configType }) => {
    config.module.rules.map((rule) => {
      if (rule.oneOf) {
        rule.oneOf = rule.oneOf.slice().map((subRule) => {
          if (subRule.test instanceof RegExp && subRule.test.test('.scss')) {
            return {
              ...subRule,
              use: [
                ...subRule.use,
                {
                  loader: require.resolve('sass-resources-loader'),
                  options: {
                    resources: [
                      path.resolve(__dirname, '../src/styles/_common.scss')
                    ]
                  }
                }
              ],
            }
          }
          return subRule;
        });
      }
      return rule;
    });
    return config;
  },

Надеюсь, это кому-то поможет!