preface
Create-react-app is facebook’s official scaffolding and is recommended for individual developers and small to medium sized companies to quickly create projects. There are many CSS solutions for React. Here, I used CSS Modules and SASS for technical selection, and then used the common component library in conjunction with ANTD. However, create-React-app does not support CSS Modules and sass natively, so additional configuration is required.
configuration
Add CSS Modules and sass
Expose the configuration using eject
Create-react-app does not expose the WebPack configuration by default, so you need to eject it. If the project is in a Git repository, commit the code to the git repository first, otherwise an error will be reported
npm run eject
Copy the codeNPM adds CSS modules and sass
npm install react-css-modules
npm install sass-loader node-sass
Copy the codeInstalling Sass here may cause wall problems, so either use CNPM or use local proxy Settings, I use local proxy because I have SS
// Start the proxy
npm config set proxy http:/ / 127.0.0.1:1080
// Close the agent after installing sass
npm config delete proxy
Copy the codeWebpack configuration
The important thing is that we need to configure CSS-modules and sas-loader for Webpack. However, using CSS-modules will not find CSS styles in node_modules, such as antD. In this case, we need inclube to exclude influencing node_modules so that CSS-modules does not affect node_modules
Modify webpack.config.dev.js and webpack.config.prod.js in the config directory of the project. The former is used by the development environment NPM start, and the latter is used by the NPM run build package
- Modify the
webpack.config.dev.js:
At about line 160, find test: /\.css$/, where the Chinese comments are to be modified and added
{
test: [/\.css$/, /\.scss$/],// Add SCSS support here
exclude: [/node_modules/].// To prevent CSS modules from affecting node_modules, node_modules is excluded
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1.modules: true.// Add support for CSS modules here
localIdentName: '[name]__[local]__[hash:base64:5]' // Add support for CSS modules here}, {},loader: require.resolve('sass-loader'), // Add sass support here
},
{
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: (a)= > [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'> 1%'.'last 4 versions'.'Firefox ESR'.'not ie < 9'.// React doesn't support IE8 anyway].flexbox: 'no-2009',}),],},},],}// Css_modules is excluded, so we must add an exclusion SRC to identify css_modules
// 其实就是复制之前没修改前的所有，再增加一个exclude: [/src/]
{
test: /\.css$/.exclude: [/src/].// add the exclusion SRC,
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: (a)= > [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'> 1%'.'last 4 versions'.'Firefox ESR'.'not ie < 9'.// React doesn't support IE8 anyway].flexbox: 'no-2009',}),],},},],}Copy the code- Modify the
webpack.config.prod.js:
This is similar to modifying webpack.config.dev.js above
{
test: [/\.css$/, /\.scss$/], // Add SCSS support here
exclude: [/node_modules/].// here to exclude node_modules
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,}},use: [{loader: require.resolve('css-loader'),
options: {
importLoaders: 1.minimize: true.sourceMap: true.modules: true.// Add CSS Modules support here}, {},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: (a)= > [
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('sass-loader'), // Add sASS support here
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.css$/.exclude: [/src/]./ SRC/ruled out
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,}},use: [{loader: require.resolve('css-loader'),
options: {
importLoaders: 1.minimize: true.sourceMap: true,}}, {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: (a)= > [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'> 1%'.'last 4 versions'.'Firefox ESR'.'not ie < 9'.// React doesn't support IE8 anyway].flexbox: 'no-2009',
}),
],
},
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
}
Copy the codeInstall ANTD and configuration
The main thing is to install and configure ANTD and babel-plugin-import so that ANTD loads styles on demand
NPM adds ANTd and babel-plugin-import
npm install antd
npm install babel-plugin-import
Copy the codeConfigure the Babel
Add the. Babelrc file in the project root directory and configure it as follows
{
"presets": [
"react-app"]."plugins": [
"transform-runtime"["import",
{
"libraryName": "antd"."style": "css"}}]]Copy the codeYou’re done