react-cli
react-cli copied to clipboard
没有办法加载antd 样式
发现一个问题, 就是没有办法加载 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/,
},
同时希望请教作者, 有没有更好的处理方式。