Webpack ругается на scss что делать?

Question

[Егор Мурунов]

Здравствуйте, я использую сборку gulp+webpack.
Gulp отвечает за html, scss, img ...
Но при подключении webpack он лезет в scss файлы и выдает ошибку:

Код модуля js:

import webpack from 'webpack-stream';

export const js = () => {
	return app.gulp.src(app.path.src.scss, { sourcemaps: true })
		.pipe(app.plugins.plumber(
			app.plugins.notify.onError({
				title: 'JS',
				message: 'Error: <%= error.message %>'
			})
		))
		.pipe(webpack({
			mode: 'development',
			output: {
				filename: 'script.min.js'
			}
		}))
		.pipe(app.gulp.dest(app.path.build.js))
		.pipe(app.plugins.browserSync.stream());
}

файл package.json:

Структура файлов:

Вроде все что нужно написал, заранее спасибо за ответ!

Answer 1

[Taulan Khatuaev]

webpack не может обрабатывать sass на прямую

npm install sass-loader node-sass webpack --save-dev

следующий код в webpack.config.js

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        "style-loader",
        "css-loader",
        "sass-loader"
      ]
    }
  ]
}

После этого вам нужно обновить вашу задачу js, чтобы учитывать изменения

import webpack from 'webpack-stream';

export const js = () => {
  return app.gulp.src(app.path.src.js, { sourcemaps: true })
    .pipe(app.plugins.plumber(
      app.plugins.notify.onError({
        title: 'JS',
        message: 'Error: <%= error.message %>'
      })
    ))
    .pipe(webpack({
      mode: 'development',
      output: {
        filename: 'script.min.js'
      },
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader"
            ]
          }
        ]
      }
    }))
    .pipe(app.gulp.dest(app.path.build.js))
    .pipe(app.plugins.browserSync.stream());
}

Comments

[Егор Мурунов]

А можно сделать так чтобы webpack вообще никак не обрабатывал sass. Просто в видео по которому я сделал это сборку там сделали также само как в моем коде и никаких требований к sass не было. Может был апдейт и нужно что-то написать чтобы он вообще не трогал sass?

[Froggyweb]

Егор Мурунов, нужно убрать SCSS из webpack.config.js ну и конечно не использовать импорт SCSS в js файлах

[Егор Мурунов]

Froggyweb, уже нашел спасибо