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?

1 Answer 1

3

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .