3

目前在使用 react 和linaria构建的站点存在跨浏览器的 CSS 兼容性问题。Linaria 本质上是一个样式化组件库，它在构建步骤中将其 CSS-in-JS 提取到 CSS 文件中。

我相信的解决方案是使用 PostCSS。然而，由于我是这个工具的新手，我正在尝试研究如何将它正确地集成到我的 webpack 配置中。特别是要确保它在提取 linaria 样式后运行。

这两个问题是：

  1. 我是postcss.config.js正确的，因为我不确定我是否应该同时使用autoprefixerand postcss-preset-env。此外，.browserslistrc针对最新版本的我是正确的：Safari、Edge、Chrome 和 Firefox。
  2. 我webpack.config.ts是否正确确保 postcss 在我从 linaria styled-components 提取的 CSS 上运行。

请参阅下面的相关配置文件。

谢谢。

webpack.config.ts

const configuration = (env: Record<string, any>, argv: Record<string, any>): Configuration => ({
  entry: getEntries,
  output: {
    path: path.resolve(__dirname, "assets"),
    filename: "[name].js",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css",
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/i,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          "@linaria/webpack-loader",
        ],
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            }
          },
          "postcss-loader",
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", "..."],
  },
});

export default configuration;

postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer"),
    require("postcss-preset-env"),
  ]
};

.browerslistrc

last 4 versions
4

0 回答 0