Bootstrap: Importing css as less

[marioana]

Importing the bootstrap.css in a less file gives and error for version 4.3.1. Works fine in 4.2.1.
@import (less) "bootstrap.css";
error is
SyntaxError: Cannot read property 'denominator' of undefined in Contentbootstrap.css line 2108

[mdo]

Likely can't help you with that here—we have no idea of your setup, tooling, or anything else. Less is also not supported as we develop Bootstrap in Sass.

[guirkgumbo]

Use "--math=strict"
lessc --math=strict prefix.less bootstrap-iso.css

[marioana]

Use "--math=strict"
lessc --math=strict prefix.less bootstrap-iso.css

perfect!

[beriwalt]

where to use:
"--math=strict"
lessc --math=strict prefix.less bootstrap-iso.css
I mean in which file.

[beriwalt]

i am getting this error and I am really new to this thing. i am trying to run a custom visual.

ERROR in ./style/visual.less
Module build failed (from C:/Users/tushar.beriwal/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from C:/Users/tushar.beriwal/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/less-loader/dist/cjs.js):

padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
^
Cannot read property 'denominator' of undefined
in node_modulesbootstrapdistcssbootstrap.css (line 2108, column 2)
at runLoaders (C:Userstushar.beriwalAppDataRoamingnpmnode_modulespowerbi-visuals-toolsnode_moduleswebpacklibNormalModule.js:302:20)
at C:Userstushar.beriwalAppDataRoamingnpmnode_modulespowerbi-visuals-toolsnode_modulesloader-runnerlibLoaderRunner.js:367:11
at C:Userstushar.beriwalAppDataRoamingnpmnode_modulespowerbi-visuals-toolsnode_modulesloader-runnerlibLoaderRunner.js:233:18
at context.callback (C:Userstushar.beriwalAppDataRoamingnpmnode_modulespowerbi-visuals-toolsnode_modulesloader-runnerlibLoaderRunner.js:111:13)
at
@ ./src/visual.ts 162:0-32
@ ./.tmp/precompile/visualPlugin.ts
@ multi ./.tmp/precompile/visualPlugin.ts

[guirkgumbo]

where to use:
"--math=strict"
lessc --math=strict prefix.less bootstrap-iso.css
I mean in which file.

Hey beriwalt,

Heres a quick walkthrough/summary.

Using "--math=strict" when compiling your less code will help with avoiding the errors you are getting.

Start with creating a folder that contains the bootstrap files you need. In this example those files will be bootstrap.css and bootstrap-theme.css.

Then create a file called prefix.less that contains the following:

.bootstrap-iso {
@import (less) 'bootstrap.css';
@import (less) 'bootstrap-theme.css'; /* optional */
}

Then compile your less with "lessc --math=strict prefix.less bootstrap-iso.css"

bootstrap-iso.css is the file that will be outputted.

Finally for sanity sake and making sure that your bootstrap is isolated.

Open boostrap-iso.css in a text editor. You will notice that .bootstrap-iso prefixes body elements. It’s not possible for a class to prefix the body. We really want these styles to apply to just the class. We can fix this with a simple find and replace:

Find all instance of: .bootstrap-iso body and .bootstrap-iso html
Replace with: .bootstrap-iso

Hope this helps.

[beriwalt]

where to use:
"--math=strict"
lessc --math=strict prefix.less bootstrap-iso.css
I mean in which file.

Hey beriwalt,

Heres a quick walkthrough/summary.

Using "--math=strict" when compiling your less code will help with avoiding the errors you are getting.

Start with creating a folder that contains the bootstrap files you need. In this example those files will be bootstrap.css and bootstrap-theme.css.

Then create a file called prefix.less that contains the following:

.bootstrap-iso {
@import (less) 'bootstrap.css';
@import (less) 'bootstrap-theme.css'; /* optional */
}

Then compile your less with "lessc --math=strict prefix.less bootstrap-iso.css"

bootstrap-iso.css is the file that will be outputted.

Finally for sanity sake and making sure that your bootstrap is isolated.

Open boostrap-iso.css in a text editor. You will notice that .bootstrap-iso prefixes body elements. It’s not possible for a class to prefix the body. We really want these styles to apply to just the class. We can fix this with a simple find and replace:

Find all instance of: .bootstrap-iso body and .bootstrap-iso html
Replace with: .bootstrap-iso

Hope this helps.

Hi guirkgumbo,
I followed the steps you told. but i am getting the same error. It's just i could find the bootstrap-theme.css file in the node_module/bootsrap/css directory. rest, i did as stated but nothing changed.

Hope you can help me through this.

[akfaisel]

If you are still getting the same error message, please try the following.

lessc --strict-math=on --compress prefix.less bootstrap-iso-min.css

[angel-carvajal]

I'm using webpack with less-loader and I'm adding the option to strict and I still get the same error
any ideas?

                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                lessOptions: {
                                    math: 'strict'
                                }
                            }
                        }

I need bootstrap to be added cuz I want to use its utilities on the classes that I create

[guirkgumbo]

@angel-carvajal try the following since I don't think you are using the correct options.
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},

[SmellydogCoding]

If you are still getting the same error message, please try the following.

lessc --strict-math=on --compress prefix.less bootstrap-iso-min.css

--math=strict didn't work for me but --strict-math=on did. (I didn't use --compress)

Thank you!

[angel-carvajal]

@angel-carvajal try the following since I don't think you are using the correct options.
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},

I ended doing this:

                        {
                            loader: 'less-loader',
                            options: {
                                strictMath: true
                            }
                        }

I'm using webpack 4 (got another error but that's another history)