react-cli icon indicating copy to clipboard operation
react-cli copied to clipboard

没有办法加载antd 样式

Open yanlele opened this issue 6 years ago • 0 comments

发现一个问题, 就是没有办法加载 antd 的样式;

      {
        test: /\.jsx?$/,
        use: 'babel-loader?cacheDirectory',
        exclude: /node_modules/,
      },
     
      {
        test: /\.(ts|tsx)?$/,
        use: 'ts-loader',
        include: [
          paths.PATH_SRC,
        ],
        exclude: /node_modules/,
      },

这个地方babel-loader 的配置是跟ts-loader 分开的, 然后发现一个问题, 放置在 .babelrc 文件里面的import antd 样式库 是加载不了的。 而且 css-loader 和 你处理样式的loader 是没有处理 antd node_modules 的样式的。

建议引入ts-import-plugin 处理:

            {
                test: /antd.*\.css/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        }
                    },
                    'css-loader?importLoaders=1',
                ],
                include: /node_modules/,
            },
            {
                test: /\.(ts|tsx)?$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                            getCustomTransformers: () => ({
                                before: [tsImportPluginFactory({
                                    libraryName: 'antd',
                                    libraryDirectory: 'lib',
                                    style: 'css'
                                })]
                            }),
                            compilerOptions: {
                                module: 'es2015'
                            }
                        },
                    },
                ],
                include: [
                    paths.PATH_SRC,
                ],
                exclude: /node_modules/,
            },

同时希望请教作者, 有没有更好的处理方式。

yanlele avatar Mar 02 '19 11:03 yanlele