Webpack Encore Zurb Foundation-sites 编译错误

Question

我正在尝试将Symfony 4应用程序中的Foundation-sites与Webpack Encore一起使用。尝试编译scss文件时，出现以下错误：

./node_modules/.bin/encore dev
Running webpack ...
ERROR  Failed to compile with 1 errors                                                                                                   6:42:54 AM
error  in ./assets/css/app.css
CssSyntaxError
(10:3) Unclosed bracket
8 |      for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
9 |  }
> 10 | })(window, function(__WEBPACK_EXTERNAL_MODULE_jquery__) {
|   ^
11 | return /******/ (function(modules) { // webpackBootstrap
12 | /******/     // The module cache
at <anonymous>

@ ./assets/js/app.js 9:0-24

我的配置如下：

webpack.config.js

var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader(function (options) {
options.sassOptions.includePaths = [
'/vendor/zurb/foundation/scss'
];
options.sassOptions.resolveUrlLoader= true;
})

.autoProvidejQuery()

;
module.exports = Encore.getWebpackConfig();

包.json

{
"devDependencies": {
"@symfony/webpack-encore": "^0.30.0",
"core-js": "^3.0.0",
"node-sass": "^4.14.1",
"regenerator-runtime": "^0.13.2",
"sass-loader": "^8.0.2",
"sass": "^1.26.5",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"foundation-sites": "^6.6.3",
"jquery": "^3.5.1"
}
}

应用.css

@import "~foundation-sites";
body {
background-color: lightgray;
}

Answer 1

app.css 中的导入是错误的。

默认情况下，它导入 Js，并且错误显示"嘿，您无法将 js 代码导入 css"。

所以正确的导入是：

@import "~foundation-sites/dist/css/foundation.css";

或最小文件：

@import "~foundation-sites/dist/css/foundation.min.css";