Блог

Я использую сборник рассказов в своем проекте ReactJS, и я не могу использовать инструкции 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$/,
    },
  },
}
 

Я также видел эту проблему в вопросах GitHub в Storybook, но ни одно из их решений не сработало для меня
Я использую локальные файлы шрифтов, и в этом также отображается ошибка.
Пожалуйста, помогите мне с этой проблемой

Вот как я 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;
}
 

Попробуйте сделать следующее:

1. В зависимостях разработчика вашего проекта заблокируйте sass-загрузчик на 10.1.1 .

Если у вас все еще были проблемы (или, возможно, даже если вышеперечисленное исправило их), перейдите к следующему:

1. Установите @storybook/preset-scss (я использовал ^1.0.3 недавно).
2. В разделе разрешение конфигурации Webpack сборника рассказов добавьте также запись для расширений, например:

   extensions: ['.scss']

3. Удалите модульную часть конфигурации Webpack сборника рассказов, особенно правила для загрузчиков sass. Предустановка SCSS, которую вы установили ранее, позаботится об этом.