antdesign样式不⽣效官⽅解决⽅案上⼀篇的解决⽅案好像还是会有问题，贴出官⽅解决⽅案，
在config-overrides.js⾥⾯将原内容替换成
const { injectBabelPlugin, getLoader } = require("react-app-rewired");
const fileLoaderMatcher = function(rule) {
return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
};
// babel-plugin-import
config = injectBabelPlugin(
[
"import",
{
libraryName: "antd",
//style: 'css',
style: true // use less for customized theme
}
],
config
);
// customize theme
test: /\.less$/,
ant design
use: [
{
loader: solve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// github/facebookincubator/create-react-app/issues/2677
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9" // React doesn't support IE8 anyway
],
flexbox: "no-2009"
})
]
}
},
{
loader: solve("less-loader"),
options: {
// theme vars, also can use theme.js instead of this.
modifyVars: { "@brand-primary": "#1DA57A" }
}
}
]
});
// css-modules
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
{
loader: solve("css-loader"),
options: {
modules: true,
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]"
}
},
{
loader: solve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// github/facebookincubator/create-react-app/issues/2677 ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9" // React doesn't support IE8 anyway
],
flexbox: "no-2009"
})
]
}
}
]
});
// file-loader exclude
let l = dule.rules, fileLoaderMatcher);
return config;
};
默认使⽤的是create-react-app⽣成是项⽬，使⽤的是ant-design

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。