"Unexpected token found" on @import directives

[DMW007]

Installed product versions

• Visual Studio: 2015 Community
• This extension: 2.1.279

Description

When a css-file contains @import statements, the minifying-process would fail with the error-message

(Bundler & Minifier) Unexpected token, found '@import'

Steps to recreate

1. Create a css file with a @import directive like @import url("../style.css");
2. Add the file to BundlerMinifier and try to minify

Expected behavior

The tool should at least leave the import-directive. But the best way would be fetching the referenced file and replace their content with the import-line, this would result in best performance.

[DMW007]

Workaround for Wordpress

I had this issue because I'm including the style.css of a self-created child-theme, with itself is build on a paid wordpress-theme. So the style.css of the parent-theme was included in the style.css of the child-theme. To avoid this, I found out that this can be done using the style-hooks in the function.php file like explained here.

Because there is no css @import anymore, we've a workaround to bypass these bug. And its also better for the performance of the wordpress-theme, since @import will block rendering. Using the way above, the css file is inserted in a normal tag. Most browsers are able to download these css-files parellel.

In the ASP.NET Core application, we must only add both of the stylesheets from parent and child-theme in the bundleconfig.json like this:

{
    "outputFileName": "wwwroot/clientscript/bundle.min.css",
    "inputFiles": [
      "wwwroot/clientscript/wp/parent-theme/style.css",
      "wwwroot/clientscript/wp/child-theme/style.css"
    ]
}

Important is, that the parent-theme should be included before the child-theme. WordPress will do the same using the functions.php described above and it make sense: So you're able to override things from the parent-theme, which you want to customize. So it could have unwanted side-effects, if you don't care about those order.

[RouR]

Same issue with @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

and with .spinner .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}

[mitja-p]

I have the same issue as above. Any fix coming?

[nrgjack]

Visual studio 2017 + Bundle & minifier 2.4.340

i have no issue

[OskarKlintrot]

Isn't 2.4.337 the latest..?

[los93sol]

I'm on VS17 with Bundle & minifier 2.5.357, still having the issue with it blowing up on @imports and @Keyframes

[alvipeo]

guys, are you going to fix this???

[garfbradaz]

Was this ever fixed?

[omuleanu]

@import statements need to be placed in the first css file (from the bundle) on the top
(this tool is not moving them for you, at least the current version)
or if you can avoid using them, you might use another link tag instead

[cpwaters]

As above, put your new css file above the site.css in the array. Works fine on VS17 with Bundle & minifier 2.8.391.

[douglasalonso]

I had this problem when I was building the project in the Azure Devops pipeline, and with this tip of creating the css file and placing the import in it and then adding the file inside the bundleconfig.json it worked. Thanks

[Takerman]

@import statements need to be placed in the first css file (from the bundle) on the top
(this tool is not moving them for you, at least the current version)
or if you can avoid using them, you might use another link tag instead

IT WORKED FOR ME! Great answer

[WalissonPires]

Was this ever fixed?

[bilalsaeed]

There are so many limitations in this tools. Is there any better alternative available?

[programatix]

I'm having issue with files containing @media, such as,

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

I get, (Bundler & Minifier) Unexpected token, found '@'

[DMW007]

There are so many limitations in this tools. Is there any better alternative available?

I used Gulp in the past, for new projects I'd have a look at Webpack.