CODEWITHSUNDEEP
javascriptwebpacksass
Euridice01
Euridice01

Reputation: 2568

How can I configure my webpack for .scss when using multiple loaders?

I have recently upgraded my webpack config reflect some new updates namely:

"typescript": "^4.2.4",
"url-loader": "4.0.0",
"webpack": "^5.0.0",
"webpack-cli": "3.3.12",
"webpack-dev-server": "^3.11.0"
"sass-loader": "^8.0.2",

However now, I can't load my .scss.

In my webpack.config.js I have this:

{test: /\.scss$/,
 include: path.join(__dirname, 'src'),
 loaders: ['style-loader', 'css-loader?minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass-loader']},

And the error I'm getting now is:

 ｢wds｣: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[5] has an unknown property 'loaders'. These properties are valid:
   object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }

How can I fix my webpack config?

Upvotes: 1

Views: 320

Answers (1)

tavoyne
tavoyne

Reputation: 6569

Rule.loaders has been deprecated in favor of Rule.use (see docs).

Try this:

{
  test: /\.scss$/,
  include: path.join(__dirname, 'src'),
  use: ['style-loader', 'css-loader', 'sass-loader']
}

Upvotes: 1

Related Questions