用create-react-app创建的项目如何启用Less Vars

Question

参考本文： https://ant.design/docs/react...

create-react-app antd-demo
cd antd-demo
yarn add antd
yarn run eject
yarn add babel-plugin-import --dev
yarn add less less-loader --dev

启用CSS Module

      {
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              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',
                }),
              ],
            },
          },
        ],
      },

Less Loader

 // Parse less files and modify variables
      {
        test: /\.less$/,
        use: [
          require.resolve('style-loader'),
          require.resolve('css-loader'),
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options              
              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: {
              //modifyVars: { "@primary-color": "#1DA57A" },
            },
          },
        ],
      },

如何在引用Less文件中启用CSS Module的变量？

import styles from './Header.less'

<div className={styles.header}>
 ...
</div>

Answer 1

试试我的

{
    test: /\.less$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          sourcemap: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      {
        loader: "less-loader" // compiles Less to CSS
      },
      {
        loader: 'postcss-loader',
      }
    ],
    include: paths.appSrc
  }

Answer 2

@小奶桶 会出现这样的问题：

./~/antd/lib/alert/style/index.less
Module parse failed: D:\reactdemos\utms\node_modules\antd\lib\alert\style\index.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "../../style/themes/default";
|
| @alert-prefix-cls: ~"@{ant-prefix}-alert";