CSS modules 导出的模块是空对象吗？

Posted 2023-03-06

【中文标题】CSS modules 导出的模块是空对象吗？

【英文标题】：CSS modules the exported module is an empty object?

【发布时间】：2019-05-14 05:27:19

【问题描述】：

我使用打字稿和create-react-app创建项目并添加typings-for-css-modules-loader并打开css-modules。

  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    
      loader: require.resolve('typings-for-css-modules-loader'),
      options: 
        modules: true,
        namedExport: true,
        camelCase: true,
      ,
    ,
    
      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',
          ),
        ],
      ,
    ,
  ],
,

我添加了*.css.d.ts 文件

export const wrapper: string;

css-modules 仍然导出空对象

import * as React from 'react';
import * as Styles from './LogIn.css';
import * as ReactTransitionGroup from 'react-transition-group';
import  Form, Icon, Input, Button  from 'antd';

console.log(Styles) // 
console.log(Styles.wrapper) // undefined

【参考方案1】：

react-app-rewired 和 yarnject 是矛盾的

使用 typescript 和 css 模块

            test: /\.css$/,
            include: /node_modules/,
            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',
                    ),
                  ],
                ,
              ,
            ],
          ,
          
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
              require.resolve('style-loader'),
              
                loader: require.resolve('typings-for-css-modules-loader'),
                options: 
                  modules: true,
                  namedExport: true,
                  camelCase: true
                ,
              ,
              
                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',
                    ),
                  ],
                ,
              ,
            ],
          ,