在storybook中使用SASS（缩进语法）。

Question

我在使用SASS的缩进语法时遇到了问题，因为文档中只描述了一种配置storybook为sassy css语法的方法（我不想使用这种方法）--是否也有使用原始SASS语法的变通方法？我在网上找了一圈，没有找到任何关于这个问题的信息......

我现在的webpackmain.js配置是这样的（不能用）。

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;
  },
};

Answer 1

解决了

这个问题是由于使用 "indentedSyntax: true "而引起的冲突，它只能用于旧的sass-loader版本（<8）。由于我使用的是8.x版本，"indentedSyntax: true "应该放在sassOptions对象中......。

无论如何，由于我没有找到任何与该主题相关的信息，我将在这里发布解决方案。只要把webpack配置添加到你的.storybookmain.js里 这样你就可以在你的storybook里使用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;
  },
};