@import line expected selector or at-rule, but not because of missing semicolon

Question

I have this compass error

Line 3: Invalid CSS after "@charset "UTF-8"": expected selector or at-rule, was "@import 'compass';")

The file is just the following. It does not even contain any of my own code

@charset "UTF-8"
@import 'compass';

I know that people say this error occurs when the @import line misses semicolon, but my file has the semicolon.

And the same files (scss and config.rb) can be easily compiled in linux with no problems.

Does anybody know what is wrong?

The configuration which gives error is

Windows 8.1
ruby 2.1.6p336 (2015-04-13 revision 50298) [i386-mingw32]
Compass 1.0.3 (Polaris)
Sass 3.4.16 (Selective Steve)

I tried many combinations

(1)
-------------------
@import 'compass';    
-------------------
// only this line, no @charset line.
// Result: compilation ok, but I need charset because 
// my COMMENTS (yes only comments) have UTF8 chars.

(2)
-------------------
@charset "UTF-8";

@import 'compass';    
-------------------
// semicolon after @charset
// Result: compilation error:
// Invalid CP950 character "\xE2"
// because the @charset line is unrecognised

(3)
// Add this to config.rb
Encoding.default_external = 'utf-8'
// https://stackoverflow.com/a/23338595/2841279
// http://blog.pixelastic.com/2014/09/06/compass-utf-8-encoding-on-windows/
// Result: compilation error: expected selector or
// at-rule, was "@import 'compass';

(4)
// Add this to config.rb
encoding = "utf-8"
// https://stackoverflow.com/a/13987672/2841279
// Result: compilation error: expected selector or
// at-rule, was "@import 'compass';

score 10 · Answer 1 · answered Dec 02 '19 at 22:03

10

Looks like putting that anywhere other than the first line of the page results in that error. Try putting it right at the top and see if it fixes that issue.

answered Dec 02 '19 at 22:03

EnterPassword

580
1
6
22

Yep, come back to this answer twice and it's fixed it both times. If I could upvote again I would. Very annoying behaviour on the part of Laravel/Composer/Webpack/whatever's responsible to be constantly adding that line where it fails, seems like a bug that should not be present 6 months on. – Hashim Aziz May 04 '21 at 00:52
@HashimAziz Hahahah... I had the same situation and if I could upvote this answer again I would. Yeah... Laravel behavior very annoying... – Kida May 14 '21 at 12:50

score 1 · Answer 2 · answered Oct 09 '19 at 11:02

1

@charset "UTF-8"; is added by the compiler e.g. sass whenever required

answered Oct 09 '19 at 11:02

Anselm

23
6

score 1 · Answer 3 · edited Jan 19 '21 at 07:19

1

this is how it needs to be in order to work

@charset "UTF-8";@import 'compass';

edited Jan 19 '21 at 07:19

Martin Brisiak

3,872
12
37
51

answered Jan 19 '21 at 01:54

Joe Diaz

23
4

@import line expected selector or at-rule, but not because of missing semicolon

3 Answers3