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

Question

我在ReactJS项目中使用Storybook，无法使用scss@import语句。错误我正在获取

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中也看到过这个问题，但他们的解决方案对我都不起作用我使用的是本地字体文件，它也显示了错误。请帮我解决这个问题

这就是我的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

尝试以下操作：

1. 在项目的开发依赖项中，将sass加载程序锁定到10.1.1

如果你仍然有问题(或者可能即使上面已经解决了(，请继续以下操作：

1. Install@storybook/preset-scs(我最近使用了^1.0.3(。

2. 在Storybook的Webpack配置的解析部分，添加一个扩展条目，例如：

   extensions: ['.scss']

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