Import path using variable SASS

Question

I'd like to import a file using variables.

My code (that doesn't work) :

$input-field-theme: default;
@import '#{$input-field-theme}';

Error message : Error: File to import not found or unreadable: #{$input-field-theme}

And this works : @import 'default';

Possible duplicate of [Can variables be used in import statements for Sass files?](https://stackoverflow.com/questions/17600018/can-variables-be-used-in-import-statements-for-sass-files) — underscore_d, Apr 13 '18 at 11:41

score 11 · Accepted Answer · edited Jun 01 '21 at 21:25

11

At this moment it is not possible, check this GitHub issue logged against Sass in 2012 for more information.

The reasoning given there is as follows:

Allowing dynamic imports would completely break Sass's ability to quickly determine which files import which other files, and thus what needs re-compiling when.

That thread also includes a link to another issue which includes this 2018 comment that discusses future plans for dynamic dependencies:

I'm locking this issue for now because there's a lot of noise without a lot of value being added. To summarize, this is the plan:

The new @use directive will provide the ability to import a file as a mixin, so you can dynamically decide whether and where to include it. This will bring Sass more in line with other languages that work well without dynamic imports, since it means importing no longer has unavoidable side-effects.

We will add a load() function as described above that will allow stylesheets to load files at runtime based on variable values. This will support the more complex use-cases where stylesheets need to be loaded based on user input, while preserving the ability to statically trace the import graph and the mixins and functions it defines.

edited Jun 01 '21 at 21:25

ruffin

16,507
9
88
138

answered Jun 01 '16 at 12:43

Mario Araque

4,562
3
15
25

Ok thank you, I'll ask to the mentor to implement this. – tonymx227 Jun 01 '16 at 13:03
I read the discussion in Apr 19. They think things would be out of control with dynamic import. On the other hand many people stuck on dynamic themes, including me. Yes CSS is not a prog.lang and we want things under control but the idea of SCSS came from limitation of CSS. It extends CSS with variables and imports so this will be their decision to evolve the project. Now, we have another limitation, and If there is a requirement people find a way with SCSS or without it. Thanks to them they made life easier after CSS. – Davut Gürbüz Apr 03 '19 at 10:05
I would honestly love it if I could do something like this `@import { myFontFile } from "../some-path/right-here/this-folder/this-file.ttf";` and then use it in `@font-face{... url('data:font/truetype;charset=utf-8;base64, #{ myFontFile.readFile() }') }` – greensin Sep 23 '19 at 11:14
Well it's 7years later - how are we on this? Could you provide an example on how it is possible with the `@use` or maybe explain why it is not? – jave.web Sep 01 '23 at 09:58

score 3 · Answer 2 · answered May 15 '18 at 06:53

Alternative solution is, if you used Gulp to compile your SASS file,you need to introduce the includePaths to the config. Then once you import any module from a folder it considers looking at the paths you introduced already in "includePaths". Ex)

gulp.task(`compileSASS`, function () {
   return gulp.src(`styles/main.scss`)
    .pipe(sass({
        outputStyle: `expanded`,
        precision: 10,
        includePaths: [
            '../../../feature',
            '../../..',
        ]    
    })
    .pipe(gulp.dest(`temp/styles`));
    });

Now that you setup your code you can import files from various paths:

 @import "promotion/code/styles/_promotion.scss";

To import this file, it will look at all "includePaths".

That is awesome. It works for me in my npm project. Many thanks! — klewis, Sep 18 '19 at 20:47

score 1 · Answer 3 · edited Jun 01 '21 at 19:41

1

`Webpack` with `SASS-LOADER` : https://webpack.js.org/loaders/sass-loader/#additionaldata

We can add to the prependData property to sass-loader options:

{ 
  loader: 'sass-loader',
  options: {
    additionalData: '$env: ' + process.env.NODE_ENV + ';',
  }
}

Note: `prependData` can be a `function` too which receives `loader-context`.

Good Luck...

edited Jun 01 '21 at 19:41

ruffin

16,507
9
88
138

answered Oct 04 '19 at 08:35

Aakash

21,375
7
100
81

1

I use this and it works fine -- though note that in latest versions, the field name is `additionalData` rather than `prependData`: https://stackoverflow.com/a/63491672/2441655 – Venryx Aug 19 '20 at 17:00

Import path using variable SASS

3 Answers3

`Webpack` with `SASS-LOADER` : https://webpack.js.org/loaders/sass-loader/#additionaldata

Note: `prependData` can be a `function` too which receives `loader-context`.

Linked

Import path using variable SASS

3 Answers3

Webpack with SASS-LOADER : https://webpack.js.org/loaders/sass-loader/#additionaldata

Note: prependData can be a function too which receives loader-context.

Linked

`Webpack` with `SASS-LOADER` : https://webpack.js.org/loaders/sass-loader/#additionaldata

Note: `prependData` can be a `function` too which receives `loader-context`.