正在学习Symfony 5，在通过Webpack和Encore进行引导集成时遇到问题，并且在CSS方面存在奇怪的问题_Symfony_Webpack_Bootstrap 4_Webpack Encore_Symfony5

正在学习Symfony 5，在通过Webpack和Encore进行引导集成时遇到问题，并且在CSS方面存在奇怪的问题

symfony webpack bootstrap-4

正在学习Symfony 5，在通过Webpack和Encore进行引导集成时遇到问题，并且在CSS方面存在奇怪的问题,symfony,webpack,bootstrap-4,webpack-encore,symfony5,Symfony,Webpack,Bootstrap 4,Webpack Encore,Symfony5,这就是我，在离开Symfony几年后，我回到了Symfony。现在它正在使用Webpack，当我上次触摸它时，它会发出警告。因此，我对许多与快速发展的JavaScript生态系统相关的事情感到困惑我去了Sensiolabs的网站，按照说明如何将引导集成到我的项目中。我在这个过程中走得相当远，因为我的网页上有一个指向我的样式表的链接： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

这就是我，在离开Symfony几年后，我回到了Symfony。现在它正在使用Webpack，当我上次触摸它时，它会发出警告。因此，我对许多与快速发展的JavaScript生态系统相关的事情感到困惑

我去了Sensiolabs的网站，按照说明如何将引导集成到我的项目中。我在这个过程中走得相当远，因为我的网页上有一个指向我的样式表的链接：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog index!</title>
            <link rel="stylesheet" href="/build/app.css">
    </head>
<body class="bg-light">

当我查看从上面的url得到的css时，我可以往下看，发现这个样式确实是由Encore添加的。然而，inspector中的样式是空的，它没有被应用。我不知道为什么，这对我来说完全是个谜。我唯一的想法是样式表的链接是不正确的，但同时我对网页包、安可和纱线都很新

也可能意味着css文件中的样式不正确。我并没有做过太多的SCS来确定是否有错误，但通常webpack会将其转换为正确的css，对吗

以下是我的html标题的细枝版本，以防万一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>
<body class="bg-light">

让我添加assets/js/app.js：

import '../css/global.scss';
import '../css/app.css';

// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';

const $ = require('jquery');
global.$ = global.jQuery = $;

和scss文件：

@import "~bootstrap/scss/bootstrap";

entrypoints.json文件的内容：

{
  "entrypoints": {
    "app": {
      "js": [
        "/build/runtime.js",
        "/build/vendors~app.js",
        "/build/app.js"
      ],
      "css": [
        "/build/app.css"
      ]
    }
  }
}

确定生成的链接href路径不正确。感谢@Julien B.提供的解决方案

由于我还没有使用virtualhost，所以我的URL采用localhost/projetfolder/public格式。我太相信Encore一开始就处理这个问题，但实际上我不得不在webpack.config.js中编辑setPublicPath方法的参数以反映我的情况。因此，它必须是.setPublicPath（'/projectfolder/public/build'），而不是.setPublicPath（'/build'）

当您更改某些内容时，请尝试清除缓存。我对这些文件也有类似的问题。Symfony找不到以下文件：

http://localhost/build/runtime.js
http://localhost/build/vendors~app.js
http://localhost/build/app.js

此后，问题消失了：

bin/console cache:clear; npm run watch

你的app.js入口点是否导入了你的css/scss文件？是的，我将在问题后面添加app.js。你是否在观看这些文件（因此当你更改源代码时它会重建）又称为“纱线观看”？如果你查看app.css文件，你看到div.superfuzz类了吗？不，我没有。我确实尝试过在Encore命令上使用watch选项，但是现在我在更改某些内容时会重新启动它。是的，当我查看由webpack构建的app.css文件时，我看到它。。。我只是添加了这个类和这个div作为一个确定的测试，但实际上我没有在任何dom元素上看到任何样式，甚至那些属于Bootstrap的样式也没有，即使我在链接的css文件中看到它们；老实说，这是我第一次在外部css文件中看到这种错误。看起来链接rel没有正确完成。请尝试在网页包配置的第11行将公共路径更改为/symfony-01/pubilc/build.setPublicPath（“/symfony-01/pubilc/build”）。请注意，这在生产中很可能是不同的，因此您必须确保配置也适用于prod

{
  "entrypoints": {
    "app": {
      "js": [
        "/build/runtime.js",
        "/build/vendors~app.js",
        "/build/app.js"
      ],
      "css": [
        "/build/app.css"
      ]
    }
  }
}

http://localhost/build/runtime.js
http://localhost/build/vendors~app.js
http://localhost/build/app.js

bin/console cache:clear; npm run watch