Webpack import sass issue

[webpack-bot]

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/style-loader!./~/css-loader!./~/sass-loader/lib/loader.js!./~/postcss-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader?minimize!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: 
 @import 'css/base.scss';
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/df/Documents/my_apps_yo/personal_page/src/index.scss (line 1, column 1)
 @ ./~/style-loader!./~/css-loader!./~/sass-loader/lib/loader.js!./src/index.scss 4:14-502 13:2-17:4 14:20-508
 @ ./src/index.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

What is the expected behavior?
I star getting that error from out of the wild, like two weeks ago, this code was working fine
my webpack config has
`const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FailPlugin = require('webpack-fail-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
module: {
loaders: [
{
test: /.json$/,
loaders: [
'json-loader'
]
},
{
test: /.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre'
},
{
test: /.(css|scss)$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader'
]
},
{
test: /.(css|scss)$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize!sass-loader!postcss-loader'
})
},
{
test: /.js$/,
exclude: /node_modules/,
loaders: [
'react-hot-loader',
'babel-loader'
]
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
FailPlugin,
new ExtractTextPlugin('index.css'),
new HtmlWebpackPlugin({
template: conf.path.src('index.html')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => [autoprefixer]
},
debug: true
})
],
devtool: 'source-map',
output: {
path: path.join(process.cwd(), conf.paths.tmp),
filename: 'index.js'
},
entry: [
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
./${conf.path.src('index')}
]
};`

my index.css has
@import 'css/base.scss';
and my index.js has
import 'style-loader!css-loader!sass-loader!./index.scss';
If this is a feature request, what is motivation or use case for changing the behavior?
Im using yeoman fountain web-app to scaffold project, did that to stop loading styles from web and start loading my own styles, which was not as simple as I thought
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

---

This issue was moved from webpack/webpack#6457 by @evilebottnawi. Orginal issue was by @DFallas.

[alexander-akait]

@DFallas you use invalid configuration please read documentation https://github.com/webpack-contrib/sass-loader#examples also don't use loader for css twice

[DFallas]

@evilebottnawi I've tried all different aproaches in extract text plugin and sass-loader and have the same error 👎
I'm using the extract text plugin to create a index.css output as follows
test: /\.(css|scss)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', // loader: 'css-loader?minimize!sass-loader!postcss-loader' use: [{ loader: "css-loader" }, { loader: "sass-loader" }], }) },

and error
ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader!./~/sass-loader/lib/loader.js!./src/index.scss Module build failed: @import 'css/base.scss'; ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /Users/df/Documents/my_apps_yo/personal_page/src/index.scss (line 1, column 1) @ ./~/style-loader!./~/css-loader!./~/sass-loader/lib/loader.js!./src/index.scss 4:14-297 13:2-17:4 14:20-303 @ ./src/index.js @ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

[DFallas]

This is the line I'm using to import
import 'style-loader!css-loader!sass-loader!./index.scss';

[DFallas]

I think there could be weird bug I just commented import line in index.js, then compile, then uncommented the line and the build works, but if I stop the build again and restart it the same error appears is really confusing see attached pic

[alexander-akait]

@DFallas please read documentation:

1. style-loader or extract plugin with fallback: style-loader and with use below
2. css-loader
3. postcss-loader
4. sass-loader

[DFallas]

@evilebottnawi thanks! Would you point me out where in the docu refers to that... is not as easy to find I've been reading some of it for some time ... so it'll be helpful.
Thanks a lot for your help, is still interesting how it is working right know with the strange behavior I mentioned before any clues on that?

[ralyodio]

I'm having the same problem. @import in my scss files doesn't work.

    config.module.rules.push({
      test: /\.scss$/,
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
      }, {
        loader: "css-loader" // translates CSS into CommonJS
      }, {
        loader: "sass-loader" // compiles Sass to CSS
      }]
    })

[dkowis]

@DFallas Maybe this is your problem: vuejs-templates/webpack-simple#107 (comment)

I had multiple scss tests when I merged my config :(

[DFallas]

@dkowis thanks

[alexander-akait]

@DFallas can we close issue?

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[zaferkircahibizz]

I moved the project to the new folder, the problem was solved.

[ILCAI]

I've read carefully the documentation and this thread.
I am experiencing the same error as @DFallas, I guess ...

The first build succeeds. Every subsequent build fails with the error [...] Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi" ...

My webpack.config.js looks like this:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const pathsToClean = [
  'dist'
];
 
const cleanOptions = {
  // root:     '/full/webpack/root/path',
  // exclude:  [ 'shared.js' ],
  verbose: true,
  dry: false
};

const config = {
  entry: {
    main: './src/index.jsx',
    global: './src/global.jsx'
  },

  devServer: {
    inline: true,
    hot: true
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },

  devtool: 'inline-source-map',

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [ 'babel-loader', 'eslint-loader' ]
      },
      {
        test: /\.svg$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [ 'url-loader' ]
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    new HtmlWebpackPlugin({
      template: 'assets/index.html',
      chunksSortMode: 'manual',
      chunks: [ 'global', 'main' ],
    }),
    new CopyWebpackPlugin([
      { from: 'assets/img', to: 'img/' },
      { from: 'assets/font', to: 'font/' },
    ])
  ],

  resolve: {
    alias: {
      styles: path.resolve(__dirname, 'assets', 'styles'),
      img: path.resolve(__dirname, 'assets', 'img')
    },
    extensions: [ '.js', '.jsx' ],
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules')
    ]
  }
};

module.exports = (env, args) => {
  if (env == 'production') {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        'css-loader'
      ]
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'sass-loader'
      ]
    });

    config.plugins.push(new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }));
  } else {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            indentedSyntax: false
          },
        }
      ]
    });
  }
  return config;
};

I updated all packages to the current versions.