After setting up Tailwind in Angular, global scss variable imports no longer works

Asked Aug 18 '20 at 18:29

Active Aug 18 '20 at 18:29

Viewed 184 times

My objective is to configure Tailwind in an existing Angular project, with Material and scss. I have followed this guide, and most things seem to work. However in the project we have a variables.scss file, with multiple variables defined like:

$spaceSize32: 32px;
$spaceSize58: 48px;

We import the variables in our component style with:

@import 'variables.scss';

However, after upgrading to tailwind, it throws the following error when we try to compile Angular:

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~variables.scss'

What can we do to fix this error?

asked Aug 18 '20 at 18:29

DauleDK

3,313
11
55
98

Variables.scss file is your project file or the Tailwind. – Muthupriya Aug 18 '20 at 18:46
the tilde (~) appears to not be supported by postcss (https://github.com/postcss/postcss-import/issues/403) – Andreas Hald Aug 18 '20 at 19:51
variables.scss is a project file – DauleDK Aug 18 '20 at 20:28
I think you should define your variables.scss file path while importing.For example @import ‘./variables.scss’ – Muthupriya Aug 19 '20 at 02:46
Ended up removing the global variables – DauleDK Aug 19 '20 at 11:36

After setting up Tailwind in Angular, global scss variable imports no longer works

0 Answers0