import styles from 报错undefined：css-loader 7.0.0 breaking change：namedExport

在css-loader 7.0时引入了一个break change：

以前的写法：

import style from "./style.css";
console.log(style.myClass);

会报 undefined，要以下面的语法进行替代

import * as style from "./style.css";
console.log(style.myClass);

如果想要恢复6.x的写法需要对webpack做如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            namedExport: false,
            exportLocalsConvention: 'as-is',
            //
            // or, if you prefer camelcase style
            //
            // exportLocalsConvention: 'camel-case-only'
          },
        },
      },
    ],
  },
};

同样的Typescript定义也需要修改

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

变更为

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export = classes;
}

ref：css-loader 7.0 更新日志