Question

I have a parent SCSS file that is importing my other CSS files:

@import 'variables.css';
@import 'helpers.css';
@import 'layout.css';

And I have three scss files: variables.css.scss;helper.css.scss & layout.css.scss.

In variables I am defining colours, fonts and sizes to be used throughout the site. The trouble is I assumed these variables will be available to the other documents so long as it is imported first, but I am getting Undefined Variable errors.

I assume I just have the process wrong. Where am I going wrong?

Answer 1

The problem is how you named the scss files. The way you are importing the files makes SASS think that you are using the @import CSS rule https://developer.mozilla.org/en-US/docs/CSS/@import
Rename those files only with the scss extensions, remove the “.css”, and import them like this

@import 'variables.scss';
@import 'helpers.scss';
@import 'layout.scss';

or you can even skip the extension at all

@import 'variables';
@import 'helpers';
@import 'layout';