Invalid CSS when importing another SASS file

[matfin]

Hi,

When I add some styling to a _partial.sass file in the SASS syntax and @import that to my main.sass file, I get the following error:

While processing files with fourseven:scss (for target web.browser):
   /client/styles/main.sass: Scss compiler error: Invalid CSS after "": expected
   1 selector or at-rule, was "body "

I have a main.sass file with the following in it:

/**
 *  Third party
 */
@import "{wolves:bourbon}/bourbon"

/**
 *  Setup
 */
@import "mixins"

Inside my _mixins.sass file (same directory) I have the following:

body 
    color: red

This gives rise to the error above but oddly enough if I delete the body styling and put it back into main.sass it works.

Further useful info

• I am using 3.4.0-beta1
• Meteor 1.2.0.2
• wolves:bourbon@3.1.0 also installed (but commenting this out doesn't change anything)
• OSX El Capitan

[sebakerckhof]

There's an error in node-sass when importing sass files:
sass/node-sass#1192

[sebakerckhof]

tracked here: #120

[select]

As @sebakerckhof said this should be merged into issue #120

[GreggOrdHume]

I had this issue recently. I fixed it by changing everything to scss. In your webpack config you can change you sass loader to scss. Its as simple as that, no need to install other packages etc.

So it would be this:

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader',
              {
                loader: 'sass-resources-loader',
                options: {
                  resources: resolve('src/scss/variables.scss')
                },
              }
            ]
          }
        }
      },

Now my variables are available globally throughout my app.