create-react-app 添加less文件后，组件会把所有的less文件都引入，如何只引入自己的less？

Question

最近再用create-react-app+antd搭建，在webpack添加了less的支持，但是发现组件A会把其它组件的less文件自动引入，组件代码写的是引入自己的less文件，这是什么情况？

webpack配置如下：

{
            test: /.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                ['import', [{ libraryName: 'antd', style: true }]],  // import less
              ],
              // 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,
            },
          },
          
          
          {
            test: /.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'),
                options: {
                  modules: true,
                  modifyVars: {
                      "@primary-color": "#3297fd"
                  }
                }
              }
            ],
          },

Answer 1

.test {
    font-size: "20px"
}

import style form "style.less"

<div style={style.test}></div>

使用这种方式，不要直接在组件引入整个样式文件

---

不好意思，手快一下写错。
正确写法：

import style form "style.less"

<div className={style.test}></div>