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

sage
1

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 -

And I also worked through the sass setup guide here -

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:

2

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.

3

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)

4

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.

5

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: