无法使用 Encore 在 Symfony 5.3 上正确安装和使用引导程序
Posted
技术标签:
【中文标题】无法使用 Encore 在 Symfony 5.3 上正确安装和使用引导程序【英文标题】：Unable to properly install and use bootstrap on Symfony 5.3 using Encore 【发布时间】：2021-10-25 17:28:38 【问题描述】：由于我目前正在使用旧的 Symfony 版本，因此我从头开始了一个新的 5.3 Symfony 应用程序。我在使用引导程序时遇到了麻烦。 在跟进一些文档后，我安装了纱线和：
yarn add bootstrap --dev
yarn add node-sass sass-loader --dev
Mu base.twig.html 有正确的链接/脚本标签：
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>% block title %% endblock %</title>
% block stylesheets %
encore_entry_link_tags('app')
% endblock %
</head>
<body>
% block body %% endblock %
</body>
% block javascripts %
encore_entry_script_tags('app')
% endblock %
</html>
我的 app.js：
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';
// start the Stimulus application
import './bootstrap';
我也有 app.scss 空和 app.css ：
@import '~bootstrap/scss/bootstrap';
还有什么我遗漏的吗？我有一个 index.html.twig，它有一个示例表单，但没有渲染它的 css：
% extends 'base.html.twig' %
% block title %Hello IndexController!% endblock %
% block body %
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
% endblock %
% block javascripts %
<script>
console.log('test');
</script>
% endblock %
`我试着看看这里：
Using bootstrap with Webpack Encore in Symfony 4 https://symfony.com/doc/current/frontend/encore/bootstrap.html Symfony 4 - Webpack Encore bootstrap css not in output【问题讨论】：
另外 .enableSassLoader() 在 webpack.confing.js 中没有注释 【参考方案1】：已解决：@import '~bootstrap/scss/bootstrap';在 app.css 中，在将其移至 app.scss 后它工作了
【讨论】：
以上是关于无法使用 Encore 在 Symfony 5.3 上正确安装和使用引导程序的主要内容，如果未能解决你的问题，请参考以下文章
在Symfony 4中使用WebPack Encore定义后无法识别JavaScript对象
Sass 加载器无法使用 Encore webpack 和 Symfony 5 加载 url
symfony webpack-encore 无法在 win7x64 中编译
使用 TailwindCSS 和 Symfony Webpack Encore