如何在 Storybook、ReactJS 中添加 SCSS @import 语句

Question

我在我的 ReactJS 项目中使用 Storybook，但我无法使用 scss @import 语句。 Error I am getting

ERROR in ./src/app/components/Button/button.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import 'Styles/style';
| .button {
|     @include openSans-font(1.2, 1, $open-sans-semiBold);
 @ ./src/app/components/Button/Button.jsx 11:0-23
 @ ./src/app/components/Button/index.js
 @ ./src/stories/Button.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js

我的.storybook/webpack.config.js文件，

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            Actions: path.resolve(__dirname, '../src/app/actions'),
            Components: path.resolve(__dirname, '../src/app/components'),
            Constants: path.resolve(__dirname, '../src/app/constants'),
            Containers: path.resolve(__dirname, '../src/app/containers'),
            Reducers: path.resolve(__dirname, '../src/app/reducers'),
            Services: path.resolve(__dirname, '../src/app/services'),
            Store: path.resolve(__dirname, '../src/app/store'),
            Selectors: path.resolve(__dirname, '../src/app/selectors'),
            Reducers: path.resolve(__dirname, '../src/app/reducers'),
            Routes: path.resolve(__dirname, '../src/app/routes'),
            Util: path.resolve(__dirname, '../src/app/util'),
            Hoc: path.resolve(__dirname, '../src/app/hoc'),
            Images: path.resolve(__dirname, '../src/assets/images'),
            Fonts: path.resolve(__dirname, '../src/assets/fonts'),
            Styles: path.resolve(__dirname, '../src/styles'),
        },
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
                include: path.resolve(__dirname, '../'),
            },
        ],
    },
};

我的.storybook/main.js文件，

const path = require('path');
const custom = require('./webpack.config.js');

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    webpackFinal: (config) => {
        return {
            ...config,
            resolve: { ...config.resolve, ...custom.resolve },
        };
    },
};

还有我的 .storybook/preview.js 文件，

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

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

我在 Storybook 的 GitHub Issues 中也看到了这个问题，但是我 none 他们的解决方案对我有用我正在使用本地字体文件，它也显示错误。请帮我解决这个问题

这就是我的 button.scss 的样子

@import 'Styles/style';
.button {
    @include flexCenter();
    @include openSans-font(1.2, 1, $open-sans-semiBold);
    cursor: pointer;
    min-width: 8rem;
    transition: 0.1s;
    border-radius: 3rem;
    display: inline-block;
    text-decoration: none;
    border: 0.01rem solid $primary-color;
}

Answer 1

尝试以下操作：

在您项目的开发依赖项中，将 sass-loader 锁定到 10.1.1.

如果您仍然遇到问题（或者可能即使上述问题已经解决），请继续以下操作：

安装@storybook/preset-scss（我最近使用^1.0.3）。
在 Storybook 的 Webpack 配置的 resolve 部分，也为扩展添加一个条目，例如：

extensions: ['.scss']
删除 Storybook 的 Webpack 配置的模块部分，尤其是 sass 加载程序的规则。您之前安装的 SCSS 预设会处理它。

如何在 Storybook、ReactJS 中添加 SCSS @import 语句

How to Add SCSS @import statements in Storybook, ReactJS

javascript

sass

reactjs

webpack

storybook