antd引入
首先需要需要在react项目中配置antd样式引入，具体可以见解决引入antd样式无效问题
配置less
首先安装less和less-loader
cnpm i --save-dev less less-loader
然后在webpack.config.dev中配置
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader')
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
},
],
},
开启css modules功能
但是如果我想开启css modules功能，使less和css可以模块化，就需要再配置，但是不能全局配置，这样的话会导致antd没有使用css modules模块的框架的样式无法作用。
开启less的css modules功能
//@Lynn 这里我开启自己编写的less文件的css modules功能 除了node_modules库中的less，
//也就是可以过滤掉antd库中的样式
{
test: /\.less$/,
exclude: [/node_modules/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
localIdentName:"[name]__[local]___[hash:base64:5]"
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
},
],
},
开启css的css modules功能
如果想开启css的css modules功能，就比较麻烦点，除了针对css开启css modules，还需要需要针对antd的css 单独写一条loader的规则,不开启 css modules。
//@Lynn 这里设置css开启modules支持,node_modules和antd里面的css不开启
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// 改动
modules: true, // 新增对css modules的支持
localIndetName: '[name]__[local]__[hash:base64:5]', //
},
},
{
loader: require.resolve('postcss-loader'),
options: {
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',
}),
],
},
},
],
}
//@Lynn 然后针对node_modules和antd里面的css写编译配置
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// 改动
// modules: true, // 新增对css modules的支持
// localIndetName: '[name]__[local]__[hash:base64:5]', //
},
},
{
loader: require.resolve('postcss-loader'),
options: {
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',
}),
],
},
},
],
},
至此就配置好了开发环境下的所有代码
同样的代码需要在webpack.config.prod，生产环境的webpack里面再配置一次，打包后的文件各种CSS和less文件才会生效。
