Ignore style declaration without value is SCSS

Question

In my scss file I am importing a third-party css file

  @import 'icons/third-party-icons/style';

Unfortunately, this style is missing the value for the color style

.mySelector {
  content: "\eac2";
  margin-left: -1em;
  color: ;
}

As expected, node-sass is throwing the following error:

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

color: ; ^ Style declaration must contain a value

Is there any way to configure node-sass to ignore this invalid property?

Answer 1

You could override the imported css. The code is looking to use a value, but can't because it's null.

You could include in your style tags:

.mySelector {
    color: black !important;
}

That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.

Answer 2

In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.

Answer 3

Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.