Использование SASS (синтаксис с отступом) в сборнике рассказов - PullRequest
Новая
       11

Использование SASS (синтаксис с отступом) в сборнике рассказов

0 голосов
/ 07 мая 2020
• 1000 вместо оригинального синтаксиса SASS? Я просмотрел inte rnet и не смог найти никакой информации об этой проблеме ...

Мой текущий webpack / main. js config выглядит следующим образом (не работает): 

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.sass$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            indentedSyntax: true,
            sassOptions: {
              indentedSyntax: true
            }
          }
        }
      ],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

1 Ответ

0 голосов
/ 07 мая 2020

Решено!

Проблема заключалась в конфликте, возникшем из-за предъявления иска "indentedSyntax: true", который следует использовать только для более старых версий sass-loader (<8). Поскольку я использую 8.x "indentedSyntax: true", его следует поместить в объект sassOptions ... </p>

В любом случае, поскольку я не нашел никакой информации, связанной с этим topi c, я опубликую решение здесь: просто добавьте конфигурацию веб-пакета в свой .storybook / main. js, чтобы вы могли использовать SASS в своем сборнике рассказов. 

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.sass$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              indentedSyntax: true
            }
          }
        }
      ],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};
...