zdJOJO/antd-cms

antd 使用 less-module 或者 css-module 时候, 样式会失效,如何解决 ?

Closed this issue · 1 comments

思路: 将wenpack 配置中的 less-loader 写2套,

//针对 自己的样式文件使用 css-module
{
  test: /\.less$/,
  // exclude: [/node_modules/],
  include: [/src/],
  use: [
    cssLoder[mode],
    {
      loader: 'css-loader',
      options: {
        // modules: true, //开启 less-modules功能
        // localIdentName: '[name]__[local]__[hash:base64:8]'
        modules: {
          localIdentName: '[name]__[local]__[hash:base64:8]'
        }
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          modifyVars: require(path.resolve(__dirname, 'modifyVars.js')),
          javascriptEnabled: true,
        }
      }
    }
  ]
},

//针对 ant-design 不使用 css-module
{
  test: /\.less$/,
  // exclude: [/src/],
  include: [/[\\/]node_modules[\\/].*antd/],
  use: [
    cssLoder[mode],
    {
      loader: 'css-loader',
      options: {
        modules: false, //关闭 less-modules功能
      },
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          modifyVars: require(path.resolve(__dirname, 'modifyVars.js')),
          javascriptEnabled: true,
        }
      }
    }
  ]
}

The problem has been solved