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;
}
...
何かアドバイス?