for some reason webpack is not recognizing css-loader, despite it being in the config and being installed. Here is my webpack.config.json
const path = require('path')
module.exports = {
entry: './index.ts',
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ["css-loader", "style-loader"],
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ["style-loader", "sass-loader"],
exclude: /node_modules/
}
],
},
resolve: {
extensions: ['.ts', '.js', '.css'],
},
mode: "production",
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
here is my index.ts import:
import 'bulma/css/bulma'
finally, here is my package.json:
{
"name": "wasm-emulator",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"bulma": "^1.0.2",
"jszip": "^3.10.1",
"ts-loader": "^9.5.1",
"typescript": "^5.5.4"
},
"devDependencies": {
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4",
"css-loader": "^7.1.2",
"sass": "^1.77.8",
"sass-loader": "^16.0.1",
"style-loader": "^4.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
I keep getting this error which says no loader is defined despite it being clearly defined:
Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I'm not sure what's going on, everything looks right to me, is there something not glaringly obvious that I'm doing wrong?
It was something really dumb. 🤦‍♀️ I was excluding node_modules but the imported css, bulma, was from node modules. Once I removed exclude: /node_modules/
from the config, it worked!