溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關在create-react-app中如何使用less與antd按需加載，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
使用antd按需加載
使用react-app-rewired對 create-react-app 的默認配置進行自定義
1、yarn add react-app-rewired --dev
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}2.然后在項目根目錄創建一個 config-overrides.js 用于修改默認配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};使用 babel-plugin-import
babel-plugin-import 是一個用于按需加載組件代碼和樣式babel 插件（原理），現在我們嘗試安裝它并修改config-overrides.js 文件
1.yarn add babel-plugin-import --dev
+ const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
return config;
};或者也可修改
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', { libraryName: 'antd', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},自定義主題
yarn add react-app-rewire-less --dev
const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
- config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+ config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
+ config = rewireLess.withLoaderOptions({
+ modifyVars: { "@primary-color": "#1DA57A" },
+ })(config, env);
return config;
};參考鏈接：https://ant.design/docs/react/use-with-create-react-app-cn
使用less
如果已經配置react-app-rewire-less，則無需再進行此操作
1.npm install less-loader less --save-dev
2.修改node_modules/react_script/config下的webpack.config.dev.js 和 webpack.config-prod.js 配置文件
test: /.css$/ 改為 /.(css|less)$/
test: /.css$/ 的 use 數組配置增加 less-loader
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
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') // compiles Less to CSS
}
],
},使用css Module
antd 和 css modules 不能混用,針對antd的css 單獨寫一條loader的規則,不開啟 css modules。
使用 exclude 和 include 配置,修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (盡量不要使用less-loader 來處理css文件，在與antd一起使用時可能出現錯誤，單獨寫一條規則)
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, // 新增對css modules的支持
localIdentName: '[name]__[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',
}),
],
},
},
],
},
{
test: /\.less$/,
exclude: /node_modules|antd\.less/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, // 新增對css modules的支持
localIdentName: '[name]__[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',
}),
],
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
},
],
},
{
test: /\.(css)$/,
include: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
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',
}),
],
},
},
],
},
{
test: /\.(less)$/,
include: /node_modules|antd\.less/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
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') // compiles Less to CSS
},
],
},關于“在create-react-app中如何使用less與antd按需加載”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
