# Switching to Bootstrap help - Expected "'bootstrap/scss/bootstrap'" to be "url('bootstrap/scss/bootstrap')"

**URL:** https://discourse.roots.io/t/switching-to-bootstrap-help-expected-bootstrap-scss-bootstrap-to-be-url-bootstrap-scss-bootstrap/26858
**Category:** sage
**Tags:** sage10
**Created:** 2024-03-15T16:32:45Z
**Posts:** 5

## Post 1 by @andrewmarksmith — 2024-03-15T16:32:45Z

Hi,

I’m trying to setup a local sage site but I’m having trouble getting it to use Bootstrap.

I worked through the guide here -

> **[Replacing Tailwind CSS with Bootstrap | Sage Docs](https://roots.io/sage/docs/replacing-tailwind-with-bootstrap/)**
>
> Sage 10 comes with Tailwind CSS out of the box, but can be replaced with Bootstrap or any other CSS framework.

And I also worked through the sass setup guide here -

[https://roots.io/sage/docs/sass/](https://roots.io/sage/docs/sass/)

Which seemed to go with no hitches.

When I try and do a yarn build I get the following error -

[stylelint]  
│ │ resources/styles/app.scss  
│ │ 1:9 :heavy_multiplication_x: Expected “‘bootstrap/scss/bootstrap’” to be “url(‘bootstrap/scss/bootstrap’)” import-notation  
│ │ 1 problem (1 error, 0 warnings)

So I changed it in the app.scss to this -

@import url(‘bootstrap/scss/bootstrap’);

Then I tried a yarn build again, which gives me this error -

sage [be9461d2e88119ee] ./public  
│  
│ │ Module build failed (from …/node\_modules/postcss-loader/dist/cjs.js):  
│ │ Error: Failed to find ‘bootstrap/scss/bootstrap’  
│ │ in [  
│ │ resources/styles  
│ │ ]  
│ │ at node\_modules/postcss-import/lib/resolve-id.js:35:13  
│ │ at async LazyResult.runAsync (node\_modules/postcss/lib/lazy-result.js:261:11)  
│ │ at async Object.loader (node\_modules/postcss-loader/dist/index.js:84:14)  
│  
╰ 2 errors

My stylelintrc.cjs has the following rule in it - ‘string-quotes’: null,

Thanks in advance for your help :slight_smile:

---

## Post 2 by @ecruhling — 2024-03-15T18:13:50Z

hello, try:

> @import url(“~bootstrap/scss/bootstrap”);

or, otherwise:

> @import url(“bootstrap/scss/bootstrap.scss”);

I think there is something configured with the webpack loader that requires the entire filename to be written out if imported without the tilde ‘~’ specifying the node\_modules directory.

---

## Post 3 by @andrewmarksmith — 2024-03-18T10:05:07Z

> [@ecruhling](#):
>
> bootstrap/scss/bootstrap.scss

Hi, thanks for getting back to me :slight_smile:

I tried your suggestions but no joy I’m afraid, this command -

@import url(“~bootstrap/scss/bootstrap”);

Returns this error -

Module build failed (from …/node\_modules/postcss-loader/dist/cjs.js):  
│ │ Error: Failed to find ‘~bootstrap/scss/bootstrap’  
│ │ in [  
│ │ resources/styles  
│ │ ]  
│ │ at node\_modules/postcss-import/lib/resolve-id.js:35:13  
│ │ at async LazyResult.runAsync (node\_modules/postcss/lib/lazy-result.js:261:11)  
│ │ at async Object.loader (node\_modules/postcss-loader/dist/index.js:84:14)  
│

And this command -

@import url(“bootstrap/scss/bootstrap.scss”);

Returns this error -

Module build failed (from …/node\_modules/postcss-loader/dist/cjs.js):  
│ │ Error: Failed to find ‘mixins/banner’  
│ │ in [  
│ │ node\_modules/bootstrap/scss  
│ │ ]  
│ │ at node\_modules/postcss-import/lib/resolve-id.js:35:13  
│ │ at async Promise.all (index 0)  
│ │ at async LazyResult.runAsync (node\_modules/postcss/lib/lazy-result.js:261:11)  
│ │ at async Object.loader (node\_modules/postcss-loader/dist/index.js:84:14)

---

## Post 4 by @ecruhling — 2024-03-18T14:14:34Z

ah, I looked back at my projects (which almost all use Bootstrap), and here’s what I have done:  
in file .stylelintrc.cjs, add a line:

```
'import-notation': null,
```

in app.scss:

```
@import "~bootstrap/scss/bootstrap"; // all of Bootstrap
```

that first line reverts stylelint to the older @import notation (to not using url())

and the @import imports all of bootstrap

I am not sure why the @import url() notation doesn’t work, and I never researched it; I just removed that stylelint rule, and it worked.

---

## Post 5 by @andrewmarksmith — 2024-03-18T15:04:39Z

Thanks for looking in to this for me, I managed to get it working by skipping the Stylelint setup, but I’ve gone back and setup the stylelint and your solution above worked as well :slight_smile: