1

I have a new sandbox with the base SFRA code installed on it. I also have my own cartridge, which has successfully overwritten some .isml template files. My code structure looks like this:

project-root/
  - storefront-reference-architecture/ - has entire code tree from https://github.com/SalesforceCommerceCloud/storefront-reference-architecture
  - my-codebase/
      - package.json
      - cartridges/
          - my_cartridge/

I'm now trying to override specific SCSS files from SFRA. For example, I copied the whole file:

storefront-reference-architecture/cartridges/app_storefront_base/cartridge/client/default/scss/product/detail.scss

... to:

my-codebase/cartridges/my_cartridge/cartridge/client/default/scss/product/detail.scss

... and made some small adjustments to the CSS. Following this guide, I also added the following to my-codebase/package.json:

  paths: {
    "base": "../storefront-reference-architecture/cartridges/app_storefront_base/"
  }

I also had to modify the SCSS import statements like so:

@import "~base/variables";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/breakpoints";
@import "~base/utilities/shapes";
@import "~base/utilities/responsiveUtils";
@import "~base/utilities/swatch";

The guide doesn't mention using the tilde (~) but I had to do that.

I also installed bootstrap in my-codebase/. I'm not sure if that's the correct way of doing it, but it was complaining it couldn't find it, and I could not find a way of using paths to fix that.

The problem is that when I run npm run compile:scss it throws errors like so:

ERROR in ./cartridges/my_cartridge/cartridge/client/default/scss/product/detail.scss
Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "bootstrap/scss/functions";
^
      File to import not found or unreadable: bootstrap/scss/functions.
      in /Users/akarlovac/fluid/git/project-root/storefront-reference-architecture/cartridges/app_storefront_base/cartridge/client/default/scss/_variables.scss (line 1, column 1)
    at runLoaders (/Users/akarlovac/fluid/git/project-root/my-codebase/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/akarlovac/fluid/git/project-root/my-codebase/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/akarlovac/fluid/git/project-root/my-codebase/node_modules/loader-runner/lib/LoaderRunner.js:233:18

Note that the issue there is coming from the _variables.scss in the SFRA folder.

What's the correct way to override a single SCSS file?

2

The problem lies with the fact that the new overlay cartridge (the sass-loader to be more precise) does not know hot to resolve to the bootstrap dependencie in the SFRA cartridge. The solution is setting the options object for 'sass-loader' like this:

loader: 'sass-loader',
options: {
    includePaths: [
        path.resolve(process.cwd(), '../storefront-reference-architecture/node_modules/'),
        path.resolve(process.cwd(), '../storefront-reference-architecture/node_modules/flag-icon-css/sass')
    ]
}

https://github.com/SalesforceCommerceCloud/plugin_wishlists/blob/master/webpack.config.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.