I have a webpack project setup like so:
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(css|scss|sass)$/,
use: [ "style-loader", "css-loader",{
loader: 'fast-sass-loader',
options: {
includePaths: ['./node_modules/normalize.css']
}
}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
and i've installed normalize.css via npm install normalize.css
, but i cant get to referencing it.
when i put @import "~normalize.css";
at the top of my main.scss
file, i get the following error:
ERROR in ./node_modules/css-loader!./node_modules/fast-sass-loader/lib??ref--6-2!./src/main.scss
Module build failed: Error: import file cannot be resolved: "@import "~normalize.css";" @/Users/micahsmith/dev/webpack-4-quickstart/src/main.scss
at Object.importReplacer (/Users/micahsmith/dev/webpack-4-quickstart/node_modules/fast-sass-loader/lib/index.js:206:19)
at importReplacer.throw (<anonymous>)
at onRejected (/Users/micahsmith/dev/webpack-4-quickstart/node_modules/co/index.js:81:24)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
@ ./src/main.scss 2:14-130
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src
Go to your entry point: import 'normalize.css';
It is way easier to import here than trying to fix css-loader
.