编译asset - npm时node-sass的问题

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())
;

这是package.json中的devDependencies

"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.

如果去掉^ in "^3.3.7"它会将版本设置为3.3.7，不使用数学。Div函数，而使用"/">

你应该考虑升级webpack encore，但这可能不太可能(容易)取决于项目。