Home > Mobile >  Load SCSS variables in Typescript for Vue 2 Vue-cli 5
Load SCSS variables in Typescript for Vue 2 Vue-cli 5

Time:04-21

In my Vue 2 project (generated by the Vue-cli v4) I used to import variables from my SCSS file into my typescript (.vue files) and it was working fine.

I had the :export { ... } in my scss file _variables.scss, the shims.scss.d.ts for typescript and everything was aligned as it should and it was working. (I had no configuration of sass-loader in vue.config.js, but I assumed that vue-cli handles it for me behind the scene...am I wrong ?)

Then I updated the vue-cli to the version 5 and the imported scss variable stopped to work and failed silently (all my TS variables used to be initialized by the scss variable are undefined now).

I've tried to reconfigure webpack to use sassloader, cssloader, styleloader... as in most of the answers on the internet but nothing seems to work.

CodePudding user response:

Check your naming scheme that you use for your SCSS files. For :export to work the files must be treated as css modules. By default only *.module.scss files are considered modules by css-loader. It might be possible that vue changed their default configuration with regard to this setting.

  • Related