Styling-Webpack

一个用于在 Webpack 中配置流行样式工具的基本插件

在 Github 上查看

293k

每周下载量

由 Storybook 制作

`@storybook/addon-styling-webpack`

使用流行的样式工具更快地在 Storybook 7 中入门。

✨ 特性

🤖 通过代码修改器为流行工具提供零配置。
🧩 流行工具的配置模板
⚡️ CSS 模块、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',
        ],
      }
    ]
  }
}

它还可以获取要添加到 Storybook 配置中的 Webpack 插件。

{
  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 模块

{
  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,
            },
          },
        ],
      },
    ]
  }
}