我收到此錯誤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";
uj5u.com熱心網友回復：
看起來你總是使用最新的 bootstrap-sass 但 webpack encore 不支持 math.div。
如果洗掉“^3.3.7”中的 ^，它會將版本設定為 3.3.7，它不使用 math.div 函式，而是使用“/”進行除法，這仍然可以作業。
您應該考慮升級 webpack encore，但這可能不會（容易）取決于專案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481613.html