Adding bootstrap in Symfony 4

Question

In my Symfony 4 project, I try to add bootstrap as an import after

yarn add bootstrap --dev

As I follow documentation, I tried to import bootstrap as follows:

@import "~bootstrap/scss/bootstrap";

When I run yarn encore dev, it says module not found.

Than I tried this:

@import "../../node_modules/bootstrap/scss/bootstrap.scss";

The output is:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve './alert' in 'C:\Users\tolga\GIT\artifex\node_modules\bootstrap\scss'

What am I missing? alert.scss is there but it cannot find module. What should I try?

tolga · Accepted Answer · 2019-10-14 12:21:51Z

8

It seems I somehow solved the problem. First of all the import directory is this:

@import "../../node_modules/bootstrap";

I don't know why tilde didn't work. Adding sass-loader didn't help.

answered Oct 13, 2019 at 23:30

tolga

2,8885 gold badges41 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arsdever · Accepted Answer · 2020-05-21 16:25:08Z

3

Old subject but the solution is to change the extension of file app.css to app.scss.

arsdever

1,3041 gold badge13 silver badges39 bronze badges

answered May 21, 2020 at 7:31

FrenchDev

311 bronze badge

This solution works for me, but by default webpack-encore does not have support for sass, it should be installed and enabled in webpack.config.js