CODEWITHSUNDEEP
webpack
Chris
Chris

Reputation: 1587

Webpack sass-loader no loaders are configured to process this file

Sorry, I know there are countless other threads with the same issue, but I've tried all the solutions to no avail. I'm simply trying to compile scss files with webpack, but when I do I get the error:

ERROR in ./css/source/main.scss 3:0 Module parse failed: Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  output: {
    path: path.resolve(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]

      }
    ]
  }
};

Upvotes: 1

Views: 2332

Answers (1)

vemga6
vemga6

Reputation: 59

Please try the below format

{
    test: [/.css$|.scss$/],
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      "postcss-loader",
      "sass-loader"
    ]
 }

Upvotes: 2

Related Questions