Support for loader parameters being Objects in styleLoaders

[Nicholas Sunga]

Hello!

Technologies being used:

• bootstrap-loader v3
• sass-loader v10

I think the documentation is incorrect: https://github.com/shakacode/bootstrap-loader#styleloaders

styleLoaders:
  - style-loader
  - css-loader
  - sass-loader

# You can apply loader params here:
  - sass-loader?outputStyle=expanded

notice how sass-loader is passed in outputStyle=expanded, but sass-loader only accepts that key-value under a parent key called sassOptions: https://github.com/webpack-contrib/sass-loader#sassoptions

what I tried is the following:

1. ... - sass-loader?sassOptions={outputStyle:'expanded'}

This will throw a Validation Error

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options.sassOptions should be one of these:
   object { … } | function

What ends up being passed to sass-loader is this object: { sassOptions: "{outputStyle:'expanded'}", sourceMap: true }

Notice how sassOptions is tied to a string.

Does the later versions of bootstrap-loader support object params? If not, is there a plan for support?

sass-loader?outputStyle=expanded still throws the same Validation Error as well

[Cheng Yu]

@nsunga where did you pass { sassOptions: "{outputStyle:'expanded'}", sourceMap: true }

in webpack or bootstraprc or the file path in require command?

we got a issue just do not know how to pass options.sourceMap variable

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options.sourceMap should be a boolean.

Hello!

Technologies being used:

• bootstrap-loader v3
• sass-loader v10

I think the documentation is incorrect: https://github.com/shakacode/bootstrap-loader#styleloaders

styleLoaders:
  - style-loader
  - css-loader
  - sass-loader

# You can apply loader params here:
  - sass-loader?outputStyle=expanded

notice how sass-loader is passed in outputStyle=expanded, but sass-loader only accepts that key-value under a parent key called sassOptions: https://github.com/webpack-contrib/sass-loader#sassoptions

what I tried is the following:

1. ... - sass-loader?sassOptions={outputStyle:'expanded'}

This will throw a Validation Error

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options.sassOptions should be one of these:
   object { … } | function

What ends up being passed to sass-loader is this object: { sassOptions: "{outputStyle:'expanded'}", sourceMap: true }

Notice how sassOptions is tied to a string.

Does the later versions of bootstrap-loader support object params? If not, is there a plan for support?

sass-loader?outputStyle=expanded still throws the same Validation Error as well

[Nicholas Sunga]

@s3341458 bootstraprc

i think u dont need sassOptions if ur just passing sourceMaps

sourceMaps is a parent key for sass-loader: https://github.com/webpack-contrib/sass-loader#options

i think this would work: sass-loader?sourceMap=true

[Amtron]

Hi @nsunga, I am working with @s3341458 and we tried this solution but unfortunately it didn't work.

This is how we're trying to get bootstrap to load:
require(bootstrap-loader/lib/bootstrap.loader?configFilePath=${__dirname}/bootstrap-config.json!bootstrap-loader/no-op.js);

The bootstrap-config.json has a key called "styleLoaders" which we pass ["style-loader", "css-loader", "sass-loader"] to as the value. We've tried to modify "sass-loader" by applying ?sourceMap=true like so: "sass-loader?sourceMap=true", however we have found that this also doesn't work.

After digging into the project files we found that for this to work we would need to modify the /src/utils/joinLoaders.js file.

Any help would be appreciated.

[Amtron]

I was able to pass with the following settings in the bootstrap-config.json file:

  "disableSassSourceMap": true,
  "styleLoaders": ['style', 'css', 'sass'],

This works; however, it passes with a few warnings:
@ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"disableSassSourceMap":true,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","buttons","forms","grid","scaffolding","tables","modals","labels","component-animations","dropdowns","button-groups","input-groups","navs","badges","tooltip","utilities","thumbnails","alerts","responsive-utilities","media","list-group","panels","responsive-embed","close"],"scripts":["alert","button","modal","tab","transition"],"configFilePath":"/app/frontend/product_embed/js/bootstrap-config.json","bootstrapPath":"/app/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js

[Justin Gordon]

If you all need a code change, please submit a PR.