樣式設定 - Webpack

用於在 Webpack 中設定常用樣式工具的基本擴充功能

在 Github 上檢視

29.3 萬

每週下載次數

由 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',
        ],
      }
    ]
  }
}

它也可以採用 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 用於搭配 Storybook 的 Tailwind

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