Styling-Webpack

用于在 Webpack 中配置常用样式工具的基础插件

在 Github 上查看

401k

每周下载量

由 Storybook 制作

`@storybook/addon-styling-webpack`

使用常用样式工具更快地开始 Storybook 7.

✨ 特性

🤖 通过代码修改实现常用工具的零配置.
🧩 常用工具的配置模板
⚡️ 支持 CSS Modules, PostCSS, Sass, Less 和 Vanilla-extract 的选项

🏁 开始

🤖 自动配置

要开始使用，请使用 Storybook CLI 安装此包

pnpm

pnpm dlx storybook@latest add @storybook/addon-styling-webpack

yarn

yarn dlx storybook@latest add @storybook/addon-styling-webpack

npm

npx storybook@latest add @storybook/addon-styling-webpack

这是做什么的？ 在底层，这会在你的项目中安装此包，并将插件添加到你的 main.js 文件中。之后，它将运行 npx @storybook/auto-config styling。这是一个代码修改包，它会尝试检测你项目中的样式工具并相应地配置 Storybook。

如果代码修改失败，请尝试手动运行 npx @storybook/auto-config styling。如果仍然失败，请在 auto-config 仓库中提交一个问题。

🛠️ 手动配置

@storybook/addon-styling-webpack 会获取你的样式工具的 Webpack 模块规则，并替换 Storybook 的 Webpack 配置中现有的规则。这避免了重复的规则，这些规则会破坏你的 Storybook 构建。

{
  name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      // Replaces existing CSS rules with given rule
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      }
    ]
  }
}

它还可以接受 Webpack 插件并将其添加到 Storybook 配置中。

{
  name: '@storybook/addon-styling-webpack',
  options: {
    plugins: [
      new MiniCssExtractPlugin(),
    ]
  }
}

🧩 常用配置

下面是一些常用样式工具的流行配置，帮助你入门。通过组合下面的不同规则，可以实现更复杂的配置。

PostCSS

// Often used for tailwind
{
  name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      // Replaces existing CSS rules to support PostCSS
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          {
            // Gets options from `postcss.config.js` in your project root
            loader: 'postcss-loader',
            options: { implementation: require.resolve('postcss') }
          }
        ],
      }
    ]
  }
}

你还可以查看这个使用 PostCSS 和 Tailwind 的示例项目与 Storybook 配合使用

CSS Modules

{
  name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      // Replaces existing CSS rules to support CSS Modules
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: true,
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          }
        ],
      }
    ]
  }
}

Sass

{
  name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      // Replaces any existing Sass rules with given rules
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: { implementation: require.resolve("sass") }
          },
        ],
      },
    ]
  }
}

Less

{
  name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      // Replaces any existing Sass rules with given rules
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: { implementation: require.resolve("less") }
          },
        ],
      },
    ]
  }
}

Vanilla-extract

{
  name: '@storybook/addon-styling-webpack',
  options: {
    plugins: [
      new VanillaExtractPlugin(),
      new MiniCssExtractPlugin(),
    ],
    rules: [
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          require.resolve("style-loader"),
          {
              loader: require.resolve("css-loader"),
              options: {},
          },
        ],
        exclude: /\.vanilla\.css$/,
      },
      {
        // Targets only CSS files generated by vanilla-extract
        test: /\.vanilla\.css$/i,
        sideEffects: true,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: require.resolve('css-loader'),
            options: {
              // Required as image imports should be handled via JS/TS import statements
              url: false,
            },
          },
        ],
      },
    ]
  }
}