@awenn2015
Веб-программист самоучка

Как исправить ошибки при сборке scss в webpack?

Раньше использовал node-sass@8.0.0 но по некоторым причинам пришлось отказаться от него (на машине которая собирает проект стоит python 3.5 и обновить его не вариант), гуглил последнюю версию node-sass которая работает до python 3.6 но толкового ничего не нашел так что пришлось перекатить с node sass к dart-sass (sass) но после посыпались ошибки, как будто sass не умеет работать с файлами .scss, (для ясности nodejs версии 14.15) вот лог ошибки

WARNING in ./src/sass/main.sass (./src/sass/main.sass.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./n
ode_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./src/sass/main.sass)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
This selector doesn't have any properties and won't be rendered.

null
 @ ./src/sass/main.sass

WARNING in ./src/sass/main.sass (./src/sass/main.sass.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./n
ode_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./src/sass/main.sass)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
This selector doesn't have any properties and won't be rendered.

null
 @ ./src/sass/main.sass

...

 ERROR in ./src/sass/main.sass (./src/sass/main.sass.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./nod
e_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./src/sass/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
   ╷
51 │           background-image: url("data:image/svg+xml,%3Csvg width='23' height='53' viewBox='0 0 23 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L21 26.5L1 52' stroke
='%23113A60' stroke-width='1.6'/%3E%3C/svg%3E%0A");
   │
                                                  ^
   ╵
  src\sass\components\_history-company.sass 51:238  @import
  src\sass\components\module.scss 26:9              @import
  src\sass\main.sass 3:9                            root stylesheet
SassError: SassError: semicolons aren't allowed in the indented syntax.
   ╷
51 │           background-image: url("data:image/svg+xml,%3Csvg width='23' height='53' viewBox='0 0 23 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L21 26.5L1 52' stroke
='%23113A60' stroke-width='1.6'/%3E%3C/svg%3E%0A");
   │
                                                  ^
   ╵
  src\sass\components\_history-company.sass 51:238  @import
  src\sass\components\module.scss 26:9              @import
  src\sass\main.sass 3:9                            root stylesheet
    at Object.loader (...\webpack\node_modules\sass-loader\dist\index.js:69:14)
 @ ./src/sass/main.sass

ERROR in ./src/sass/main.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
   ╷
51 │           background-image: url("data:image/svg+xml,%3Csvg width='23' height='53' viewBox='0 0 23 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L21 26.5L1 52' stroke
='%23113A60' stroke-width='1.6'/%3E%3C/svg%3E%0A");
   │
                                                  ^
   ╵
...

Generated code for [...]\webpack\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[0].use[1]![...]\webpack\node_modules\postcs
s-loader\dist\cjs.js![...]\webpack\node_modules\resolve-url-loader\index.js![...]\webpack\node_modules\sass-loader\dist\cjs.js??ru
leSet[1].rules[0].use[4]![...]\webpack\src\sass\main.sass
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: semicolons aren't allowed in the indented syntax.\n   ╷\n51 │           background-image: ur
l(\"data:image/svg+xml,%3Csvg width='23' height='53' viewBox='0 0 23 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L21 26.5L1 52' stroke='%23113A60' stroke-width='1.6'/%3
E%3C/svg%3E%0A\");\r\n   │
                                                                        ^\n   ╵\n  src\\sass\\components\\_history-company.sass 51:238  @import\n  src\\sass\\components\\module.scss 26:9
        @import\n  src\\sass\\main.sass 3:9                            root stylesheet");

webpack 5.74.0 compiled with 2 errors and 21 warnings in 1128 ms


package.json

{
  "name": "[...]",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "sass": "./src/sass/main.scss",
  "scripts": {
    "dev": "webpack --mode=development --config webpack.config.js",
    "build": "webpack --mode=production --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap-scss": "^5.2.2",
    "dompurify": "^2.4.1",
    "intl-tel-input": "^17.0.19",
    "jquery": "^3.6.0",
    "jquery-mask-plugin": "^1.14.16",
    "owl.carousel": "^2.3.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "setimmediate": "^1.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@types/dompurify": "^2.4.0",
    "@types/intl-tel-input": "^17.0.5",
    "@types/jquery": "^3.5.14",
    "@types/jquery-mask-plugin": "^1.14.4",
    "@types/owl.carousel": "^2.3.3",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "@types/setimmediate": "^1.0.2",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "autoprefixer": "^10.4.13",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.2",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "fibers": "^5.0.3",
    "mini-css-extract-plugin": "^2.7.0",
    "postcss": "^8.4.19",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.3",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0",
    "terser-webpack-plugin": "^5.3.5",
    "ts-loader": "^9.3.1",
    "typescript": "^4.8.3",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "browserslist": {
    "production": [
      "ie >= 8",
      "last 5 version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
  • Вопрос задан
  • 238 просмотров
Пригласить эксперта
Ответы на вопрос 2
imko
@imko
Senior Scratch Developer
Ну первая "ошибка" не ошибка, он просто не компилит пустые рулсеты - незачем, и предупреждает об этом. А вторая потому что у тебя видимо код SCSS а он ожидает SASS, соответственно надо найти параметр отвечающий за то какой синтаксис он будет ожидать, может быть он по какой-то части файла подумал что у тебя indented синтаксис, перепроверь корректность кода
Ответ написан
@awenn2015 Автор вопроса
Веб-программист самоучка
imko я может чего то не понимаю но почему он не может работать с двумя расширениями, поменял на scss теперь жалуется на sass, бред какой то, такие темы даже не по гуглишь нормально
Ответ написан
Ваш ответ на вопрос

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

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