编译资产时出现 node-sass 问题 - npm

Question

我收到此错误npm run prod

npm run prod
> @ prod /opt/atlassian/pipelines/agent/build
> encore production
Running webpack ...
 ERROR  Failed to compile with 2 errors4:15:08 PM
 error  in ./web/assets/src/scss/styles.scss
Module build failed: 
$navbar-padding-horizontal:        floor(math.div($grid-gutter-width, 2)) !default;
                                            ^
      Invalid CSS after "...     floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w"
      in /opt/atlassian/pipelines/agent/build/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss (line 369, column 46)
 @ ./web/assets/src/scss/styles.scss 4:14-219
 error  in ./web/assets/src/scss/styles.scss

我已经经历了很多修复，其中之一是使用sass而不是node-sass我所做的，但随后它抛出了这个错误

  Error: Install node-sass to use enableSassLoader()
    yarn add node-sass --dev
  

如果我禁用.enableSassLoader()此错误，则会发生此错误

 FIX  To load SASS files:
        1. Add Encore.enableSassLoader() to your webpack.config.js file.
        2. Install node-sass
              yarn add node-sass --dev

这是我的webpack.config.js

var Encore = require('@symfony/webpack-encore');
Encore
    .setOutputPath('web/assets/public')
    .setPublicPath('/assets/public')
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .addEntry('js/scripts','./web/assets/src/js/scripts.js')
    .addEntry('js/video','./web/assets/src/js/video/video.js')
    .addEntry('js/registration','./web/assets/src/js/registration/registration-lookup.js')
    .addStyleEntry('styles', './web/assets/src/scss/styles.scss')
    .enableSassLoader(function(sassOptions) {
    }, {
         resolveUrlLoader: false
     })
    .enablePostCssLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
;

这是我devDependencies的package.json

"devDependencies": {
    "@symfony/webpack-encore": "^0.17.1",
    "autoprefixer": "^7.2.5",
    "bootstrap-sass": "^3.3.7",
    "cssnext": "^1.8.4",
    "jquery": "^3.6.0",
    "linting": "^1.0.0",
    "node-sass": "^4.7.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.10",
    "sass-loader": "^6.0.6",
    "webpack-notifier": "^1.5.1"
  },

这是我的styles.scss

@import "imports/_variables.scss";

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

Answer 1

看起来你总是使用最新的 bootstrap-sass 但 webpack encore 不支持 math.div。

如果删除“^3.3.7”中的 ^ ，它会将版本设置为 3.3.7，它不使用 math.div 函数，而是使用“/”进行除法，这应该仍然有效。

您应该考虑升级 webpack encore，但这可能不太可能（容易）实现，具体取决于项目。