使用Storybook导入scss文件

Question

我目前正面临着故事书的问题.使用webpack,我的应用程序中的一切都运行良好.故事书似乎与我的配置有关.

这是我的webpack.config.js:

module.exports = {
   entry: './index.js',
   output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js'
},
module: {
   loaders: [
   {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      include: __dirname
   },
   {
      test: /\.scss$/,
         use: [
         {loader: "style-loader"}, 
         {loader: "css-loader"},
         {loader: "sass-loader",
          options: {
            includePaths: [__dirname]
    }
  }]
},

故事书在解析scss文件时遇到问题,我是否需要为Storybook创建一个特定的webpack.config.js来解决这个问题？

在我的主应用程序中,我以这种方式导入我的scss文件: import './styles/base.scss'

Answer 1

我只是添加了一个与现有的webpack.config.js类似的webpack.config.js:

const path = require('path')

module.exports = {
    module: {
     rules: [
     {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
     },
     {  test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: __dirname
     },
     {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'fonts/[hash].[ext]',
            limit: 5000,
            mimetype: 'application/font-woff'
          }
         }
     },
     {
       test: /\.(ttf|eot|svg|png)$/,
       use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[hash].[ext]'
          }
       }
     }
   ]
 }
}

Answer 2

对于那些在 Create React App 上运行 storybook 的人，添加MiniCssExtractPlugin以.storybook/webpack.config.jon解决我加载 sass 文件的问题：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.scss$/,
    loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../')
  });

  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))

  return config;
};

归功于 Nigel Sim！

Answer 3

Storybook 的 SCSS 预设

基本用法

npm i -D @storybook/preset-scss css-loader sass sass-loader style-loader

然后将以下内容添加到.storybook/main.js:

module.exports = {
  addons: ['@storybook/preset-scss'],
};

或 高级用法

您可以通过使用对象插件声明@storybook/preset-scss并在键下添加配置来传递配置options。styleLoaderOptions您可以使用、cssLoaderOptions和键将配置传递到预设的 webpack 加载器中sassLoaderOptions。请参阅每个加载程序的文档以了解有效选项。您可以像平常一样通过字符串声明注册其他插件。

module.exports = {
  addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
           modules: true,
           localIdentName: '[name]__[local]--[hash:base64:5]',
        }
      }
    },
    // You can add other presets/addons by using the string declaration
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}

Answer 4

Storybook 6 中有简单的代码main.js，对我来说效果很好！

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  stories: [...],
  addons:[...],
  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?url=false', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

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