I
I
iRedds2018-09-24 09:50:33
Sass
iRedds, 2018-09-24 09:50:33

Webpack 4 sass. How to solve the problem with the bootloader?

Google recipes don't help. What am I doing wrong?
Error:
[0] ./resource/js/index.js 50 bytes {0} [built]
[1] ./resource/sass/app.scss 177 bytes {0} [built] [failed] [1 error]
ERROR in ./resource/sass/app.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .test {
| background-color: #fff000;
| }
@ ./resource/js/index.js 1:0-25
webpack config:

const path = require('path');

module.exports = {
  entry : './resource/js/index.js',
  output: {
    path: path.resolve(__dirname, './public/assets/js/'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test : '/\.scss$/',
        exclude: /node_modules/,
        use : ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
}

Installed packages
"css-loader": "^1.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.1",

Answer the question

In order to leave comments, you need to log in

2 answer(s)
P
Pavel Antonov, 2018-09-24
@iRedds

And try like this

const path = require('path');

module.exports = {
  entry : './resource/js/index.js',
  output: {
    path: path.resolve(__dirname, './public/assets/js/'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test : /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  },
}

R
Russo2, 2020-12-21
@Russo2

For those who have the same problem.
Check if you have installed the sass package as it is required for sass-loader to work
npm i -D sass

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question