Compiling .scss to css with grunt returns with weird error

Question

So this is what I have inside of my grunt:

concat: {
      css: {
        src: [
          'assets/**.scss.liquid', 'assets/**.css'
        ],
        dest: 'assets/build.scss.liquid',
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed',
          sourcemap: 'none',
          noCache: true
        },
        files: {
          'assets/build.css.liquid':'assets/build.scss.liquid'
        }
      }
    }

SCSS:

.all-collection {
  padding-top: 50px;
  height: 100%;
  width: 100%;
  color: white !important;
  justify-content: center;
  display: flex;

  p {
    color: white !important;
  }
}

This is what it returns after running grunt concat and grunt sass: Error: Invalid CSS after "50px": expected expression (e.g. 1px, bold), was ";" on line 2 of all-collection.scss

I tried removing the ; on the line it was specifying but the error just changed to the next line that has ;. Not sure why it's giving this error.

what is the SCSS for that line? That means that there is an error in your SCSS, so it can't be compiled — Jacob G, Oct 26 '16 at 19:08
@JacobGray .all-collection { padding-top: 50px; height: 100%; width: 100%; color: white !important; justify-content: center; display: flex; p { color: white !important; } } — Gamaliel, Oct 26 '16 at 19:09
Can you post that in your question, and show exactly what line is causing the issue? — Jacob G, Oct 26 '16 at 19:10
Huh. Is that the whole source of the file? Does it do it on any other files? — Jacob G, Oct 26 '16 at 19:14
Not the whole source file but the error starts at that line and then keeps on going down each line when I remove the `;` @JacobGray — Gamaliel, Oct 26 '16 at 19:15
How large is the whole source? If it isn't too large, post it. If it is, post the part before that class — Jacob G, Oct 26 '16 at 19:16
My guess is that you're missing a semicolon before the class declaration, I'll have to see the SCSS to know though — Jacob G, Oct 26 '16 at 19:18
[Here's the full source of the scss](http://codepen.io/gamalielhere/pen/ZpkAJN) @JacobGray — Gamaliel, Oct 26 '16 at 19:21
Hmm, I don't see anything invalid at the line it says. Have you tried it on other files? — Jacob G, Oct 26 '16 at 19:23
@JacobGray just did. Still gives the same error about the colon. — Gamaliel, Oct 26 '16 at 19:26
Are you running `concat` before you run `sass`? Try just running sass — Jacob G, Oct 26 '16 at 19:30
Okay, get rid of concat, and just link your SCSS files using `@import` — Jacob G, Oct 26 '16 at 19:39
@JacobGray Seems to really hate ';'. It returned with `Error: Invalid @import: expected end of line, was ";". on line 1 of assets/build.scss.liquid` — Gamaliel, Oct 26 '16 at 20:06
@Gamaliel if you paste that portion of your code on its own in another `scss` file, you'll see that it compiles so that's not where the problem is. There's probably an illegal value supplied earlier or a missing semicolon or a form of syntax error that's tripping the way it's being compiled and where sass is identifying the error occurrence — Adetoyese Kola-Balogun, Oct 26 '16 at 20:57
@BlackEnigma I just switchted to grunt-sass instead. Worked like a charm so I kept it. Thanks! — Gamaliel, Oct 26 '16 at 22:10

score 0 · Accepted Answer · answered Oct 26 '16 at 22:11

0

Solved by switching plugins. I'm using grunt-sass instead.

answered Oct 26 '16 at 22:11

Gamaliel

67
1
11

Compiling .scss to css with grunt returns with weird error

1 Answers1