YegerChill
@YegerChill
Front-End developer

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

Здравствуйте, я использую сборку gulp+webpack.
Gulp отвечает за html, scss, img ...
Но при подключении webpack он лезет в scss файлы и выдает ошибку:
64049e89c63a6920282450.png
Код модуля 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:
64049f2f939cd490940016.png
Структура файлов:
64049f7e83c5d704318028.png
Вроде все что нужно написал, заранее спасибо за ответ!
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 1
i229194964
@i229194964
Веб разработчик
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());
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы