0

css スタイルシートを HTML ページに適用しようとしているだけでなく、それを JavaScript コードの文字列として取得しようとしています (スタイルシートをユーザーに表示したい)。と を使用css-loaderしてstyle-loaderいます。以下は、webpack 構成ファイルのスニペットです。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          { loader: 'css-loader'}
        ]
      }
    ]
  }

この構成を使用すると、スタイルが HTML ページに適用されますが、コード内の文字列として取得できません。空のconsole.log(style.toString())オブジェクト[object Object]が表示されます。Object.keys(style)を与えるので、それは空です[ ]app.jsファイルは次のとおりです。

const style = require('./style.css')

const test = () => {
  console.log(style.toString())
}

test()

をコメントアウトする{ loader: 'style-loader'}と、コンソールはスタイルシートを出力しますが、スタイルは HTML ページに適用されません。この場合のconsole.log(style.toString())出力は次のとおりです。

* {
  margin: 0;
  padding: 0;
  border: 0;
}
...

何かアドバイス?

4

0 に答える 0