ERROR Invalid css after "...load the styles:" expected 1 selector or at-rule, was "var content = requi"

[varunrajasekhar]

I am having this error while using the postcss-loader

ERROR in C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/css-loader!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/postcss-loader/lib!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/sass-loader!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/style-loader!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/css-loader?{"minimize":true}!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/postcss-loader/lib!C:/Development/cxdigital/digital-spearhead/digital-ui/src/~/sass-loader!../scss/core.scss Module build failed: @import "node_modules/cxdigital-ui-library/src/scss/base/_config"; ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in C:\Development\cxdigital\digital-spearhead\digital-ui\src\main\content\jcr_root\etc\designs\digital\clientlibs\src\scss\core.scss (line 1, column 1) @ ../scss/core.scss 4:14-576 @ ./index.js

===============my webpack.config.js================

const webpack = require('webpack'); const path = require('path');

// Plugins const ExtractTextPlugin = require('extract-text-webpack-plugin'); const SpritePlugin = require('svg-sprite-loader/plugin'); const AutoPrefixer = require('autoprefixer');

// Env //const nodeEnv = process.env.NODE_ENV || 'development'; const nodeEnv = 'production'; const isProduction = nodeEnv === 'production';

// Dirs const jsSourcePath = path.join(dirname, './main/content/jcr_root/etc/designs/digital/clientlibs/src/js'); const buildPath = path.join(__dirname, './main/content/jcr_root/etc/designs/digital/clientlibs/dist'); const sourcePath = path.join(dirname, './main/content/jcr_root/etc/designs/digital/clientlibs/src');

// https://github.com/webpack/loader-utils/issues/56 process.noDeprecation = true;

const plugins = [ new SpritePlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv), }, }), new webpack.NamedModulesPlugin(), new webpack.LoaderOptionsPlugin({ options: { postcss: [ AutoPrefixer({ browsers: ['last 2 versions', 'ios 8', 'ie 9', 'ie 10', 'ie 11'], }), ], context: sourcePath,
}, }), ];

const rules = [ { test: /.(js|jsx)$/i, exclude: /node_modules\/(?!(cxdigital-ui-library)\/).*/, use: [ 'babel-loader', 'eslint-loader', ], }, { test: /.svg$/i, include: /node_modules\/cxdigital-ui-library\/src\/assets\/icons/, use: [ { loader: 'svg-sprite-loader', options: { extract: true, spriteFilename: 'assets/icons/sprite.svg', }, }, 'svgo-loader', ], }, { test: /.(gif|png|jpe?g)$/i, include: /node_modules\/cxdigital-ui-library\/src\/assets\/img/, loaders: [ 'url-loader?limit=1&name=assets/img/[name].[ext]', { loader: 'image-webpack-loader', query: { mozjpeg: { quality: [90, 95], progressive: true }, gifsicle: { interlaced: true }, optipng: { optimizationLevel: 5 }, pngquant: { quality: '75-90', speed: 3 }, }, }, ], }, { test: /.(png|svg)$/i, include: /node_modules\/cxdigital-ui-library\/src\/assets\/favicon/, loaders: [ 'url-loader?limit=1&name=assets/favicon/[name].[ext]', { loader: 'image-webpack-loader', query: { optipng: { optimizationLevel: 5 }, pngquant: { quality: '75-90', speed: 3 }, }, }, ], }, { test: /.(ico)$/i, loader: 'file-loader?name=assets/favicon/[name].[ext]', }, // { test: /.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" }, { test: /.scss$/, // use: [ // {loader:'style-loader'}, // [{loader:'css-loader'},
// { loader:'postcss-loader', // // options: { // // plugins: () => [require('autoprefixer')] // // } // }, // { loader: 'sass-loader' }] // ] loader:ExtractTextPlugin.extract({ fallback:'style-loader', use:[ 'css-loader', 'postcss-loader', 'sass-loader' ] }) } ];

if (isProduction) { plugins.push( new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, screw_ie8: true, conditionals: true, unused: true, comparisons: true, sequences: true, dead_code: true, evaluate: true, if_return: true, join_vars: true, }, output: { comments: false, }, }), new ExtractTextPlugin('css/styles.css'), new webpack.BannerPlugin({ include: /.(css|js)$/i, banner: '[file]\nCopyright (c) TR', }) );

rules.push( { test: /.scss$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { minimize: true } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' }, ], }), } ); } else { plugins.push( new ExtractTextPlugin({ filename:'css/styles.css', disable: false, allChunks: true }), new webpack.BannerPlugin({ include: /.(css|js)$/i, banner: '[file]\nCopyright (c) TR', }) );

// rules.push( // { // test: /.scss$/, // loader: ExtractTextPlugin.extract({ // fallback: 'style-loader', // use: 'css-loader!postcss-loader!sass-loader', // }), // } // ); }

module.exports = { devtool: isProduction ? false : false, context: jsSourcePath, entry: { js: 'index.js', }, output: { path: buildPath, publicPath: '/etc/designs/digital/clientlibs/dist/', filename: 'js/app.js', }, module: { rules, }, resolveLoader: { alias: { 'react-svg': 'svg-react-loader' } }, resolve: { extensions: ['.js', '.jsx'], modules: [ path.resolve(__dirname, 'node_modules'), jsSourcePath, ], }, plugins, devServer: { contentBase: buildPath, historyApiFallback: true, port: 3000, compress: isProduction, inline: !isProduction, hot: !isProduction, host: 'localhost', disableHostCheck: true, stats: { assets: true, children: false, chunks: false, hash: false, modules: false, publicPath: false, timings: true, version: false, warnings: true, colors: { green: '\u001b[32m', }, }, }, };

======================my postcss-config=================

module.exports={ plugins: [ //require('precss'), () => [require('autoprefixer')()] ] };

[michael-ciniawsky]

Please always put our code in backticks ``` Code ``` and feel free to reopen an new issue