Multiple CSS Files in Dist using variables.scss

[joeldenne]

Hi

I’m trying to split up my main.scss into a few more page-specific files i.e. My Account styling only loading on the ‘My Account’ page.

I’ve modified assets/config.json to include another file which works fine - but I’m trying to use SCSS variables from the _variables.scss file.

I’m using @import in main.scss as per sage default, and the same in my separate file, this case woocommerce.scss

Is it not possible to use $variables in multiple different output files?

Thanks in advance

Error:

 error  in ./assets/styles/woocommerce.scss

Module build failed: ModuleBuildError: Module build failed: 
  background: $white;
             ^
      Undefined variable: "$white".
      in /Users/upperdog/Sites/primera-sports/web/app/themes/primera/assets/styles/woocommerce.scss (line 7, column 15)
    at runLoaders (/Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/async/dist/async.js:2244:31)
    at Object.callback (/Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/async/dist/async.js:906:16)
    at options.error (/Users/upperdog/Sites/primera-sports/web/app/themes/primera/node_modules/node-sass/lib/index.js:294:32)

[PrecisionCoder13]

Is it not possible to use $variables in multiple different output files?

Yes, you can use multiple files.

You have to import your _variables.scss file in each splited sub-files at the top of all other imports(may be your 1st line).

Hope this help…

[joeldenne]

My fault completely. I was calling a variable that was in bootstraps default _variables.scss not my own overrides one.

D’oh.

Problem solved!