导入 scss 文件在故事书文件中不起作用

Question

我目前在使用 scss 的故事书反应方面遇到问题。我正在使用 sb init 创建故事书文件。一切正常，加载了所有插件，但只有样式不起作用。如果我使用css 文件，该样式将起作用。

我已经按照文档中关于使用 @storybook/preset-scss 和 webpackFinal 配置的说明进行操作，但它仍然无法正常工作

这是来自故事书文件的示例

import './button.scss'; 无法正常工作

import React from 'react';
import PropTypes from 'prop-types';

import './button.scss'; -> this one not working

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  backgroundColor: PropTypes.string,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

这是我的/storybook/main.js 文件

const path = require('path')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  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, '../src'),
    });

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

webpack.config.js

const path = require('path')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base')

const config = {
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
    library: 'violets'
  }
}

module.exports = merge(baseConfig, config)

webpack.base.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const autoprefixer = require('autoprefixer')

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin({})
    ],
  },
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        loader: require.resolve('babel-loader'),
        options: {
          compact: true
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        sideEffects: true,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          {
            loader: require.resolve('sass-loader')
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                /*  eslint global-require: ["off"]  */
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  flexbox: 'no-2009'
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: 'file-loader'
      },
    ]
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'violets.min.css'
    })
  ]
}

Answer 1

我遇到了类似的问题，并且为我修复了以下 Github 线程：

storybookIssue-12464

这是摘要（确保您已安装 scss）：

1. 就我而言，我没有安装 preset-scss 插件。我通过使用：

   npm install @storybook/preset-scss --save

在您的情况下，preset-scss 插件似乎已经存在。

1. 注释掉main.js文件中的配置规则：

   config.module.rules.push({

   test: /\.scss$/,

   use: ["style-loader", "css-loader", "sass-loader"],

   include: path.resolve(__dirname, "../"), });

2. 如果这不起作用，请尝试将您的 scss 文件导入故事书配置文件夹的 preview.js。

   .storybook > preview.js > import your CSS file;

最后，一些可能对您有用的参考： SCSS-Presets