使用带有故事书的全局 scss答案

【问题标题】：Use global scss with storybook使用带有故事书的全局 scss
【发布时间】：2020-10-20 13:23:36
【问题描述】：

我是 Storybook 的新手。

我有一个全局使用的.scss 文件。我想从故事书中导入这个文件。

所以我制作了 .storybook/config.js 文件并在里面导入 scss。但它显示错误。

错误

ERROR in ./styles/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./node_modules/sas
s-resources-loader/lib/loader.js!./styles/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of C:\Users\Walter\WebstormProjects\closet-next\styles\style.scss
>> var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIn
   ^

 @ ./styles/style.scss 2:26-346 43:4-64:5 46:18-338
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.
storybook/config.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

什么是问题？这是main.js

main.js

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.(js|mdx|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/preset-scss',
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '/')],
        transpileManager: true,
      },
    },
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true, 
        babelOptions: {},

      },
    },
  ],
  parameters: {
    docs: {
      inlineStories: false, 
    },
  },
  webpackFinal: config => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', 'sass-resources-loader'],
    });
    return config;
  },
};

【问题讨论】：

标签： javascript storybook

【解决方案1】：

只需将此行添加到.storybook/preview.js 的顶部，那么一切都应该很好

import '!style-loader!css-loader!sass-loader!../src/globalStyles/global.scss';

还要记得安装开发依赖项

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

【讨论】：

也添加sass
我得到 TypeError: this.getOptions is not a function 请帮忙解决这个问题
@KrishnaJangid 检查这个答案：stackoverflow.com/a/66087132/2043718 ...还要注意 css-loader 和 style.loader 的版本。由于“过时”的 webpack 版本，您需要降级这些版本。
this.getOptions - 不要使用高于 10 的 sass-loader，它需要 webpack 5

【解决方案2】：

您使用的是哪个版本的故事书？ config.js 已重命名为 preview.js from v5.3 onwards

要导入全局样式，您应该创建.storybook/preview-head.html 并在其中导入您的global.scss。这将为所有故事加载它。

【讨论】：

global.scss不能被浏览器解析，需要先处理。您是否暗示此步骤由 Storybook 隐式完成。如果是这样，这是否记录在某处？从我的角度来看，我尝试了导入但徒劳无功。
我可以看出我的回答是多么令人困惑。 Sass 文件当然不能在 HTML 文件中导入——它们需要进行预处理，并且只能包含生成的 css 文件。我更专注于回答在哪里可以包含所有故事的通用样式。

【解决方案3】：

来自故事书documention：如何添加scss 支持

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

【讨论】：