Invalid CSS after "...load the styles": expected 1 selector or at-rule

[ycg520520]

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
require('./assets/styles/common.scss') // require common.scss
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

webpack.base.conf.js

module.exports = {
      {
        test: /\.scss$/,
        use: ['css-loader', 'sass-loader']
      }
    ]
  }
}

npm run dev

Module build failed: 
$red: red;
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/yangchaoguo/Documents/website/ehome/src/assets/styles/common.scss (line 1, column 1)

 @ ./src/main.js 6:0-38
 @ multi ./build/dev-client ./src/main.js

[GoranGjorgievski]

Anyone found a solution for this yet?

[kuzzaka]

In my case, I found out that this error happened because of several rules with test '.scss' was applied. Maybe your webpack.base.conf is merged with another config where there is another rule for .scss files. Hope this helps.

[kuistime]

The same problem, I add sass-loader in webpack.base.conf.js file by follow this instruction(https://github.com/webpack-contrib/sass-loader).

BUT build/utils.js also defined sass rules, so I comment that line scss: generateLoaders('sass'), out, and problem resolved.

[anilnamde]

I got the same issue after spending some time I realized that I was using /.js$/ in rules test instead of /.scss$/. Changing it fixed it for me.

[Maseeharazzack]

{ test: /.scss$/, exclude: [ /node_modules/, helpers.root('src', 'style.scss') ], use: [ 'to-string-loader', 'css-loader', 'sass-loader' ] }, { test: /.scss$/, use: ExtractTextPlugin.extract({ use: 'css-loader!sass-loader' }) },

I have same issue can anyone help me resolving this? My code works in dev environment but in production env it doesn't work ..

[javahaxxor]

basically the same scenario here

[derakhshanfar]

same issue for me any solution?

[TrabacchinLuigi]

I don't have any other rules who test for scss (or i can't find it... but i have just one config file...), but i still get this error ... I've solved like this: { test: /\.scss$/, loader: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=false' } The keys was: ?indentedSyntax=false

[youhackme]

In my case, I was trying to compile a scss file with mix.less(). --'

[seventheluck]

As kuzzaka said, this error happened because of several same rules named '.scss' ! Hope this helps you.

[lindenquan]

I changed from test: /.s?css/ to test: /.scss/, then the error is gone.

[AlexGusew]

I had a similar trouble. I did not know that it's shouldn't to name selectors starting from the number.

[lake2]

I have the same problem. Notice that test: /.scss$/, and test: /.css$/, is an regular expression, and a dot match every character, so test: /.css$/ will match scss, which will lead to error . use a slash before dot.

   module: {
        rules: [
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
            {
                test: /.vue$/,
                loader: "vue-loader",
            },
            {
                test: /.less$/,
                loader: ['style-loader', 'css-loader?url=false', 'less-loader'],
            },
            {
                test: /\.scss$/,
                loader: ['style-loader', 'css-loader?url=false', 'sass-loader'],
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader?url=false']
            }
        ]
    },

[Siddharth77]

It is just an issue of improper indentation of code, once it is properly indented then your issue will get resolved. As in my case, it got resolved when I have removed unnecessary spaces and line break with proper indentation of code :

[ZhenZY]

It may just be a problem caused by the lack of a semicolon in the previous line of code.

[JserJser]

It may just be a problem caused by the lack of a semicolon in the previous line of code.

yes you say right thanks

[Angry-Sparrow]

As kuzzaka commented on 26 Jun 2017,this error happened because of several rules with test '.scss' was applied. Maybe your webpack.base.conf is merged with another config where there is another rule for .scss files. So,I checked my file 'webpack.config.js' and found out this

{
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },

please pay your attention to exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.scss$/],

you should delete "/.scss$/" Now you can compile successfully.

[austinbillings]

I ran into this issue, in a fresh project (newest webpack, loaders, etc.), where I was referencing import './someFilename.scss' from an es6 js module, and inspired by @leesgithub2019's comment above, I was able to resolve the issue by removing my webpack loaders for /\.css$/ files, leaving only my /\.scss$/ rule, since I figured I'd only reference .scss files (and not any plain css).

Beyond that, I suppose you could also get away with a single rule for /\.s?css$/, even though one's plain CSS would run through the SASS compiler. Luckily SASS is a superset of CSS so that's a non-issue, but could someone ELI5 the actual problem here?

Edit: FWIW I am not using vuejs-templates, but this was the best result for the issue I searched ("webpack sass Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi")

[tandang213]

In my case, i resolve it by removing some loader from the rules, here's my code before : { test: /\.(sa|sc|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: (resourcePath, context) => { // publicPath is the relative path of the resource to the context // e.g. for ./css/admin/main.css the publicPath will be ../../ // while for ./css/main.css the publicPath will be ../ return path.relative(path.dirname(resourcePath), context) + '/'; }, }, }, 'css-loader', 'sass-loader', 'style-loader', 'postcss-loader' ], },

Then I remove 'style-loader' and 'postcss-loader' and it's works!

[ManiRana]

in my case i was using