

webpackのcss-loaderを使ったCSS Modulesで `@import`
したファイルのクラス名が取得できません。以下に最小と思われる再現コードを掲載します。

## 再現コード

### test.html

[code]

    <script src="dist/main.js"></script>
    
[/code]

JavaScriptを実行するのが目的です。

### src/index.js

[code]

    const styles = require('./index.css');
    console.log('styles', styles);
    console.log('index', styles.locals.testindex);
    console.log('import', styles.locals.testimport);
    
[/code]

デバッグが目的です。最後の `styles.locals.testimport` が `undefined` になって困っています（後述）。

### src/index.css

[code]

    @import 'import.css';
    
    .testindex {
      color: red;
    }
    
[/code]

### src/import.css

[code]

    .testimport {
      background: blue;
    }
    
[/code]

### webpack.config.js

[code]

    module.exports = {
      entry: './src/index.js',
      output: {
        path: `${__dirname}/dist`,
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              {
                loader: 'css-loader',
                options: {
                  import: true,
                  modules: true,
                },
              },
            ],
          },
        ],
      },
    };
    
[/code]

## 再現方法

[code]

    npm i -D css-loader webpack webpack-cli
    npx webpack --mode production
    open test.html
    
[/code]

### consoleへの出力

[code]

    styles {
      0: [3, "._10aNScd5VABi2Vi1Zunpbc {↵  background: blue;↵}↵", ""],
      1: [2, "._2ppZfX3K2LiFyomekB0B7T {↵  color: red;↵}↵", ""],
      locals: {
        testindex: "_2ppZfX3K2LiFyomekB0B7T"
      }
    }
    index _2ppZfX3K2LiFyomekB0B7T
    import undefined
    
[/code]

## やりたいこと

`@import` 先のクラスである `testimport` が `_10aNScd5VABi2Vi1Zunpbc`
に置き換わっているのが確認できるのですが、これを `styles.locals.testimport` で取得したいです。

オプションもしくはwebpackプラグインの追加で解決する方法があれば嬉しいです。仕様でしたら記載されているところを教えていただけると助かります。


CC BY-SA 4.0
2019-03-23T04:55:46.430
53664
2019-03-23T04:55:46.430
29556
question
webpack
CSS Modulesで@importを含んだCSSのクラス名が取得できない