Symfony 4 - Webpack Encore bootstrap css 不在输出中 [英] Symfony 4 - Webpack Encore bootstrap css not in output

问题描述

我正在尝试将 Webpack Encore 引入我的 Symfony 4 应用程序以管理 JS &CSS 资源.

I am trying to introduce Webpack Encore into my Symfony 4 app to manage the JS & CSS assets.

我安装了 yarn 和 nodejs.

然后composer require encore，然后yarn install.

我在 assets/js/ 中有 app.js 文件.

I have the app.js file in assets/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 require will output into a single css file (app.css in this case)
require('bootstrap');
require('../css/app.css');

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');

console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

使用纱线安装引导程序和其他依赖项:

Installed bootstrap and other dependencies with yarn:

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "bootstrap": "^4.3.1",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.7",
        "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"
    }
}

然后运行yarn encore dev --watch

问题

我的 public/build/app.css 中没有任何引导 css.

I do not get any bootstrap css in my public/build/app.css.

除了 require('bootstrap'); 在 webpack.config.js 中，我还需要什么吗?

Do I need anything more than require('bootstrap'); in webpack.config.js?

推荐答案

如果你进入 node_modules 目录，寻找 bootstrap 并打开它的 包.json 你会发现条目:

If you go to the node_modules directory, look for bootstrap and open its package.json you'll find the entry:

"main": "dist/js/bootstrap",

当你这样做时:

require("bootstrap");

在您的文件中，您需要在库的 package.json 的 main 部分中指定的文件.
但是，您可以通过指定其(相对)路径来要求库中的任何文件:

in your file you require the file(s) specified in the section main of the library's package.json.
You can however require any file from the library by specifying its (relative) path:

require("bootstrap/dist/css/bootstrap.css");

现在您可以运行:

yarn encore dev

并且 Bootstrap CSS 应该在您的 app.css 中.

and the Bootstrap CSS should be in your app.css.

编辑(2019-03-05):
这是截屏视频的相关块代码7.需要 CSS！?，SymfonyCasts 课程的一部分 Webpack Encore:资产教程的派对.

EDIT (2019-03-05):
Here is the relevant block code of the screencast 7. Require CSS!?, part of the SymfonyCasts Course Webpack Encore: A Party for your Assets Tutorial.

更新 (2019-11-25):
此答案解释了如何使用 require 函数绑定(导入)使用 yarn(或 npm)安装的 CSS 库"https://nodejs.org/api/modules.html#modules_require_id" rel="nofollow noreferrer">Node.js.

UPDATE (2019-11-25):
This answer explains how to bind (import) a CSS library installed with yarn (or npm) using the require function provided by Node.js.

ECMAScript 2015(也称为 ES6)引入了新功能 import.它的用法在 answer 中有解释">白兔.

ECMAScript 2015 (also known as ES6) introduces new feature import. Its usage is explained in the answer from WhiteRabbit.

除了这两个选项之外，还有第三种导入 Bootstrap 的可能性，那就是直接在您自己的 CSS 文件中使用 @import :

Beside these two options, there is also a third possibility to import Bootstrap and that is by using @import directly in your own CSS file:

@import 'bootstrap';

这仅在使用 Webpack 和 Yarn(或 NPM)时适用.Webpack Encore 能够解析路径并导入对应的 CSS 文件.

This applies only when using Webpack and Yarn (or NPM). Webpack Encore is able to resolve the path and import the correspondent CSS file.

这篇关于Symfony 4 - Webpack Encore bootstrap css 不在输出中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！