Skip to content

Legacy SASS loader method breaks in @next #5178

Closed
@MarkLSky

Description

@MarkLSky

I'm using a SASS component library that relies heavily on global imports, e.g:

@import "core-ui/tile";

To achieve this in react-scripts 1.x, it was a requirement to pass node_modules to the include-path:

"build-css": "node-sass-chokidar src/ -o src/ --include-path node_modules",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive --include-path node_modules"

From the discussion in #4903 it was decided to disallow global imports in @next, instead requiring the "~" symbol to explicitly import a module.

This is not suitable for my use case, as the library itself uses global imports to import it's own dependencies - I have no control over going in and adding "~" to every import the library uses.

The breaking issue here is that in @next it is no longer possible to use the method of loading SASS from react-scripts 1.x, as installing node-sass will trigger the sass-loader and cause a build error:

.Failed to compile.                                                    

/src/index.scss)                                                     
Module build failed:                                                  
@import "core-ui/tile";                                                                
                                                                      
^                                                                     
      File to import not found or unreadable: core-ui/tile. 

Is there any way of disabling the sass-loader in @next in order to revert the previous method?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions