Sp-dev-docs: Can't import local .css file into .scss

Created on 18 Sep 2017 · 5Comments · Source: SharePoint/sp-dev-docs

Expected or Desired Behavior

In previous versions of the SPFx I was able to import a local .css file into my .scss file using
@import url('filename.css'); in the .scss file

Observed Behavior

When I try to do this with the latest version of the SPFx I get the following error:

"Error: Uncaught, unspecified "error" event. (Ignoring local @import of "filename.css" as resource is missing."

Steps to Reproduce

copy a .css file to your SPFx web part project at the same level as the .scss file

in your .scss file put in @import url('filename.css'); as the first line where "filename.css" is the name of your css file.

execute gulp

discussion question

Source

mrackley

Most helpful comment

Could you see if this works for you instead (no url and no .css extension)?

@import 'filename';

waldekmastykarz on 18 Sep 2017

👍4

All 5 comments

Could you see if this works for you instead (no url and no .css extension)?

@import 'filename';

waldekmastykarz on 18 Sep 2017

👍4

I guess in a previous version the SASS integration listened to both .css and .scss extensions. In order to import a file in your SASS file the file needs to be moved somehow to the lib directory in the root/sourcepath folder of your solution.

There are several solutions to this:

Szenario 1: Rename .css file to .scss
This will pass your css file to the compilation process and produce a css file in the lib folder. Now you can import the file using:

@import url('filename')

Now you import he file through a regular CSS/HTTP import in your style sheet.

Szenario 2: SASS @import
The built-in SASS import is based on the CSS @importstatement but instead of specifying the 'url' you simply need to specify the path to the file. In this case as @waldekmastykarz mentioned:

@import 'filename'
// or @import 'filename.css'

is enough.
During the SASS compilation process the file in your source directory will be embedded in the default web part CSS. The final compiled webpart css won't have the import statement included but includes the source code of your CSS file.
More info on SASS import can be found on: SASS '@import directive'

StfBauer on 18 Sep 2017

Does the suggested change work for you? I'm going to close this. If you're still seeing this issue, please open a new issue.

iclanton on 27 Sep 2017

@import '~jquery-ui/themes/base/all.css';
it works for Laravel-mix, but gulp doesn't see it.

EugeneAndrievsky on 12 Apr 2018

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues