Cannot use @import in css

Question

Could someone help me figure out how to fix this error message i get:

 > Using "webpack" config function defined in next.config.js.
 ERROR  Failed to compile with 1 errors7:42:34 PM

 error  in C:/projects/node_modules/semantic-ui-css/semantic.min.css

Module parse failed: C:\project\src\app\node_modules\next\dist\server\build\loaders\emit-file-loader.js??ref--7!C:\project\node_modules\semantic-ui-css\semantic.min.css Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
|  *
|  */
| @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
|  * # Semantic UI 2.2.12 - Reset
|  * http://github.com/semantic-org/semantic-ui/

 @ ./pages/_document.js?entry 47:0-43
 @ multi ./pages/_document.js?entry

From what I gather, i do not have the right config to use a url loader in my css. But I am unsure how to get this to work. What appropriate loader do I need to handle this file type? And how do i set it up in my config file?

Config:

    const path = require('path')
const glob = require('glob')
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
    distDir: "../functions/next",
    webpack: (config, {dev}) => {
        // Remove minifed react aliases for material-ui so production builds work
        if (config.resolve.alias) {
            delete config.resolve.alias.react
            delete config.resolve.alias['react-dom']
        }

        config.module.rules.push({
            test: /\.s?css$/,
            loader: 'emit-file-loader',
            options: {
                name: 'dist/[path][name].[ext]',
            },
        });

        if (!dev) {
            config.module.rules.push({
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                                modules: false,
                                url: true,
                                sourceMap: false,
                                minimize: true,
                                localIdentName: false
                                    ? '[name]-[local]-[hash:base64:5]'
                                    : '[hash:base64:5]',
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                                plugins: () => [
                                    autoprefixer(),
                                ],
                            },
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                includePaths: [
                                    path.resolve(__dirname, 'scss'),
                                    path.resolve(__dirname, 'pages'),
                                ],
                            },
                        },
                    ],
                }),
            });

            config.plugins.push(new ExtractTextPlugin('app.css'));
        } else {
            config.module.rules.push({
                test: /\.scss$/,
                use: [
                    { loader: 'raw-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: 'inline',
                            plugins: () => [
                                autoprefixer(),
                            ],
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true },
                    },
                ],
            });
        }


        return config
    }
}

I am using next.js framework.

Answer 1

Since you are using postcss you can add @import functionality via plugins, use postcss-easy-import for example. Make sure to use it before any other plugin.

    const easyImport = require('postcss-easy-import);
   // ...
   loader: 'postcss-loader',
   options: { 
         sourceMap: 'inline', 
         plugins: () => [ 
             easyImport(),
             autoprefixer(), 
         ], 
     },

Also take a look at postcss-cssnext, it's such a great tool!