Module.css 加载成功但未定义

Question

我从

module.css

导入数据，但它是未定义的。

import styles from "../css/basic-styles.module.css";
console.log(styles) // undefined.

我的

basic-styels.module.css

有数据

*{
  outline: none;
}
.pageMoveIconInActive{
  color: #BBBBBB;
  cursor: default;
}

Webpack.config.js 有规则

 module: {
   rules: [
       {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
               loader: "babel-loader",
           },
       },
       {
        test: /\.css/,
        use: [
            "style-loader",
            {
                loader: 'css-loader'
            }
        ]
    },

和

npm run dev

看起来显示了正确的日志。

javascript modules 6.62 KiB
  ./src/components/FormPage.js 4.91 KiB [code generated]
  ./src/css/basic-styles.module.css 1.15 KiB [code generated]
  ./node_modules/css-loader/dist/cjs.js!./src/css/basic-styles.module.css 576 bytes [built] [code generated]
webpack 5.90.3 compiled successfully in 373 ms
assets by status 1.86 MiB [cached] 1 asset
cached modules 1.61 MiB (javascript) 2.4 KiB (runtime) [cached] 119 modules
./node_modules/css-loader/dist/cjs.js!./src/css/basic-styles.module.css 576 bytes [built]
webpack 5.90.3 compiled successfully in 54 ms

那么，我应该去哪里检查呢？

Answer 1

使用

{ modules: true }

配置启用 CSS 模块

css-loader

。

来自 style-loader 文档：

所有局部变量（类名）都作为命名导出导出。要实现此行为，您还必须为

modules

 设置 

css-loader

选项

见下面的例子：

index.js

：

import * as styles from './styles.module.css';
console.log('🚀 ~ styles:', styles);

styles.module.css

：

* {
    outline: none;
}

.pageMoveIconInActive {
    color: #bbbbbb;
    cursor: default;
}

webpack.config.js

：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin({})],
};

构建日志：

$ npm run build

> build
> webpack

asset main.js 24 KiB [compared for emit] (name: main)
asset index.html 231 bytes [emitted]
runtime modules 972 bytes 5 modules
cacheable modules 9.96 KiB
  modules by path ./node_modules/ 8.15 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB
      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.42 KiB [built] [code generated]
      ./node_modules/style-loader/dist/runtime/styleDomAPI.js 1.5 KiB [built] [code generated]
      ./node_modules/style-loader/dist/runtime/insertBySelector.js 1000 bytes [built] [code generated]
      + 3 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.31 KiB
      ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 2.25 KiB [built] [code generated]
  modules by path ./src/ 1.81 KiB
    ./src/index.js 86 bytes [built] [code generated]
    ./src/styles.module.css 1.17 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./src/styles.module.css 568 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 268 ms

在浏览器中打开

dist/index.html

文件，在控制台看到日志：