🐣
【npmパッケージ】css-loaderのインストールから設定まで
作成日:
2021/12/31
1
css-loaderとは?
エントリーポイントのjsにcssを読み込ませるために必要なnpmパッケージ。
(作成したcssをJavaScriptのモジュールとして読み込ませる)
(これがないとエントリーポイントのjsからcssを読み込めない)
①npm install --save-dev css-loader
コマンドにて、npmパッケージを追加。
追加されているかpackage.jsonで確認する。
②webpack.config.jsに設定を追加
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
},
//ここから追加
module: {
rules: [
{
//test → ファイル名を検知する(cssファイルを検知する)
test: /\.css/,
//cssを検知した場合、以下ルールを適用する(css-loaderを使用せよ)
use: [
{
loader: 'css-loader'
}
]
}
]
}
//ここまで追加
}
③エントリーポイントのJSにcssを読み込む記述を追加
import my from './modules/my.js'
//ここから追加
import './modules/my.css'
//ここまで追加
console.log('webpack')
my();
④modules/にmy.cssを追加
body {
color: lightblue;
}
※ただし、これだけではまだCSSは適用されない。
JavaScriptで読み込んだだけで、使用していない。
以下に続く。
事業会社にてコーダーをしています。制作は6年目。
インプットしたことをアウトプットしています。