Как решить Module parse failed: Unexpected character '@' при экспорте стилей Swiper?

Question

[Roman S.]

Видел статьи с объяснением как решить данную проблему для webpack, нужно добавить следующий код в webpack.config.js:
{
test: /\.(sass|less|css)$/,
use: ["style-loader", "css-loader", 'sass-loader'],
}
Проблема в том, что я не знаю аналог этого файла для сборки gulp, куда именно вставлять этот код, чтобы не нарушить работу самой сборки? Если это поможет, то я использую сборку "Фрилансер по жизни"

Файлы, куда предположительно нужно вставить код:

SCSS.JS:

import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import rename from 'gulp-rename';
import cleanCss from 'gulp-clean-css'; // Сжатие CSS файла
import webpcss from 'gulp-webpcss'; // Вывод WEBP изображений
import autoprefixer from 'gulp-autoprefixer'; // Добавление вендорных префиксов
import groupCssMediaQueries from 'gulp-group-css-media-queries'; // Групировка медиа запросов

const sass = gulpSass(dartSass);

export const scss = () => {
	return app.gulp.src(app.path.src.scss, { sourcemaps: app.isDev })
		.pipe(app.plugins.plumber(
			app.plugins.notify.onError({
				title: "SCSS",
				message: "Error: <%= error.message %>"
			})))
		.pipe(sass({
			outputStyle: 'expanded'
		}))
		.pipe(app.plugins.replace(/@img\//g, '../img/'))
		.pipe(
			app.plugins.if(
				app.isBuild,
				groupCssMediaQueries()
			)
		)
		.pipe(
			app.plugins.if(
				app.isBuild,
				autoprefixer({
					grid: true,
					overrideBrowserslist: ["last 3 versions"],
					cascade: true
				})
			)
		)
		.pipe(
			app.plugins.if(
				app.isBuild,
				webpcss(
					{
						webpClass: ".webp",
						noWebpClass: ".no-webp"
					}
				)
			)
		)
		.pipe(app.gulp.dest(app.path.build.css))
		.pipe(
			app.plugins.if(
				app.isBuild,
				cleanCss()
			)
		)
		.pipe(rename({
			extname: ".min.css"
		}))
		.pipe(app.gulp.dest(app.path.build.css))
		.pipe(app.plugins.browsersync.stream());
}

JS.JS:

import webpack from "webpack-stream";

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

Если нужна дополнительная информация, пожалуйста сообщите мне об этом, заранее спасибо!

Answer 1

[HippieCocoa]

Вот этот кусок

{
test: /\.(sass|less|css)$/,
use: ["style-loader", "css-loader", 'sass-loader'],
}

Для сборки "Фрилансер по жизни" нужно разместить в задаче js.js (путь: корень/gulp/tasks/js.js) во втором пайпе.
Полноценно кусок будет выглядеть следующим образом:

.pipe(webpack({
			mode: app.isBuild ? 'production' :'development',
			output: {
				filename: 'app.min.js',
			},
			module: {
				rules: [
				  {
					test: /\.(sass|less|css)$/,
					use: ["style-loader", "css-loader", 'sass-loader'],
				  },
				],
			},
		}))

style-loader, css-loader, sass-loader необходимо, естественно, сначала скачать.

Answer 2

[DudochkaKseniia]

Привет! может поможет : у меня была такая же проблема с Webpack. В документации нашла, что ему нужен dart-sass. С таким конфигом всё работает.
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
// Prefer `dart-sass`
implementation: require("sass"),
},