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?

Does this answer your question? [webpack (with sass-loader) - scss file @import does not recognize resolve alias](https://stackoverflow.com/questions/34717203/webpack-with-sass-loader-scss-file-import-does-not-recognize-resolve-alias) — Heretic Monkey, Mar 07 '23 at 19:52

score 2 · Answer 1 · answered May 16 '17 at 18:16

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';

Webpack and Aliases within scss @import

1 Answers1