Webpack and Aliases within scss @import

Question

Given below project structure:

|- SRC
|-- COMMON
|---- SCSS
|------ GLOBAL.scss
|------ VARIABLES.json (scss colors in json structure)
|-- PAGES
|---- COMPONENTS
|------ COMPONENT A
|-------- SCSS
|---------- componentA.scss
|------ COMPONENT B
|-------- SCSS
|---------- componentB.scss

I want to @import global.scss file into the single component scss files. I don't want to use relative paths, because components structure may have different nesting.

Currently I'm using Webpack Aliases:

resolve: {
  alias: {
    common: path.resolve(__dirname, 'src/common/')
  }
}

and I'm using @import 'common/scss/global.scss'; and @import 'common/scss/variables.json' and it's not working.

• Module build failed
• File to import not found or unreadable.

PS. Using json-loader, sass-loader etc.

Could you please help to find working solution of how to import JSON and SCSS without using relative '../../../../../' paths?

Answer 1

Sass has no special syntax for relative paths, so your import is equivalent to:

@import './common/scss/global.scss';

To inform webpack that it should be resolved as a module you can start the path with ~ and your alias will be applied correctly. See also sass-loader imports.

@import '~common/scss/global.scss';