ant design样式不生效官方解决方案

 2023-09-19 阅读 19 评论 0

摘要:上一篇的解决方案好像还是会有问题,贴出官方解决方案, 在config-overrides.js里面将原内容替换成 const { injectBabelPlugin, getLoader } = require("react-app-rewired"); const fileLoaderMatcher = function(rule) { return rule.loader &

上一篇的解决方案好像还是会有问题,贴出官方解决方案,

在config-overrides.js里面将原内容替换成

const { injectBabelPlugin, getLoader } = require("react-app-rewired");

const fileLoaderMatcher = function(rule) {
return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
};

module.exports = function override(config, env) {
// babel-plugin-import
config = injectBabelPlugin(
[
"import",
{
libraryName: "antd",
//style: 'css',
style: true // use less for customized theme
}
],
config
);

// customize theme
config.module.rules[1].oneOf.unshift({
test: /\.less$/,
use: [
require.resolve("style-loader"),
require.resolve("css-loader"),
{
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/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: require.resolve("less-loader"),
options: {
// theme vars, also can use theme.js instead of this.
modifyVars: { "@brand-primary": "#1DA57A" }
}
}
]
});

// css-modules
config.module.rules[1].oneOf.unshift({
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
modules: true,
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]"
}
},
{
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/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 = getLoader(config.module.rules, fileLoaderMatcher);
l.exclude.push(/\.less$/);

return config;
};
默认使用的是create-react-app生成是项目,使用的是ant-design

antdesign原型设计,转载于:https://www.cnblogs.com/drizzle-wen/p/8391109.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/2/78936.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息