symfony - Webpack Encore Zurb Foundation-sites 编译错误
问题描述
我正在尝试在 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;
}
解决方案
app.css 中的导入错误。
默认情况下它会导入 Js 并且错误提示“嘿,你不能将 js 代码导入 css”。
所以正确的导入是:
@import "~foundation-sites/dist/css/foundation.css";
或最小文件:
@import "~foundation-sites/dist/css/foundation.min.css";
推荐阅读
- woocommerce - Woo commerce add-to-cart 将图像添加到购物车
- fish - 为什么 argv[-1] 在 fish_title 中显示手册标题?
- git - 文件完全从我的存储库中消失了,硬重置没有帮助,我能做些什么吗?
- php - 如何从 JSON 中提取数据并将其插入到 Laravel 中 MySQL 的相应列中?
- sql - 在 postgresql 中执行多个独立查询
- python - 如何让 Qt 异步运行以进行交互使用,如 Matplotlib 的离子模式?
- python-3.x - 为什么堆排序算法中的build_heap函数不执行
- html - HTML/CSS 单选按钮多级手风琴在选择时自动关闭
- c# - 升级“DependencyInjection”后的 C# 身份验证问题
- python - 为什么以下 2 个“if”结构在 Python 上有所不同?