将全局 scss 与 storybook 结合使用

Question

我是 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

主文件

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

Answer 1

只需在顶部添加此行，.storybook/preview.js一切都会好起来的

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

还记得安装开发依赖项

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

Answer 2

您使用哪个版本的故事书？从 v5.3 开始config.js已重命名为preview.js

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