semantic.min.css:1 Uncaught Error: Module parse failed: 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.4.0 - Reset

[shekharj1234]

Here is my webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
inject: 'body',
output: {
path: '/dist', // dist is the destination
filename: 'bundle.js',
},
favicon: './src/assets/images/react_js-512.png',
// alias: {
// 'themes/default/assets': path.resolve(__dirname, '../../node_modules/semantic-ui-css/themes/default/assets'),
// }
});

module.exports = {
module: {
rules: [{
test: /.scss$/, // /.(s*)css$/,
exclude: /node_modules/,
use: [
{
loader: "style-loader",
options: {
singleton: true
}
},
{
loader: "css-loader",
options: {
modules: true,
url: true,
sourceMap: true,
}
},
{
loader: "sass-loader"
},

      {
        loader: "file-loader",
       
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000",
      },            
    ]
  },
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: "babel-loader"
  },
   {
     test: /\.css$/,
     include: [
       path.resolve(__dirname, "not_exist_path")
     ],
     loader: "style!css"
   },
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: "babel-loader"
  },
  {
    test: /\.(jpe?g|png|gif|ico)$/i,
    loader: 'file?name=[name].[ext]'
  },
  {
    test: /\.svg$/,
    loader: 'svg-inline-loader'
  },      
]

},
plugins: [HtmlWebpackPluginConfig]
}

Any help will be appreciated.

[nagacoder]

Same problem to me, any suggestion?

[nkumnberlin]

i've the same problem

[builtbybo]

I had a similar issue - it turned out that the configuration of the exclude/include rule options were incorrect

[amarkantku]

node_modules/semantic-ui-css/semantic.min.css:11
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
^

SyntaxError: Invalid or unexpected token
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)

any help please ??

[yanwii]

I add the require in index.less:

@import (css) '~semantic-ui-css/semantic.min.css';

then import the index.less in App.js:

import "./index.less"

It works for me.

[anupam-io]

Hi @yanwii.
It is still giving me the same error.

Error in ./index.less
Module parse failed: /home/pam/Documents/U_ETH_1/kickstarter/pages/index.less Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import (css) '~semantic-ui-css/semantic.min.css';
ModuleParseError: Module parse failed: /home/pam/Documents/U_ETH_1/kickstarter/pages/index.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import (css) '~semantic-ui-css/semantic.min.css';
    at doBuild (/home/pam/Documents/U_ETH_1/kickstarter/node_modules/next/node_modules/webpack/lib/NormalModule.js:303:19)
    at runLoaders (/home/pam/Documents/U_ETH_1/kickstarter/node_modules/next/node_modules/webpack/lib/NormalModule.js:209:11)
    at /home/pam/Documents/U_ETH_1/kickstarter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/pam/Documents/U_ETH_1/kickstarter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/pam/Documents/U_ETH_1/kickstarter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/pam/Documents/U_ETH_1/kickstarter/node_modules/next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
    at /home/pam/Documents/U_ETH_1/kickstarter/node_modules/next/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
    at /home/pam/Documents/U_ETH_1/kickstarter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

Can someone tell why this is happening?

[anupam-io]

I had a similar issue - it turned out that the configuration of the exclude/include rule options were incorrect

Hey, @builtbybo
Can you tell which configurations to change?

[6aldej]

@yanwii
thank you, it helped me 🥰

[devzendo]

I found @yanwii 's suggestion worked for me - Thank you!
The changes I needed to get this working - if this might help others in the same situation...
I added the less-loader via npm, then added this section to my webpack config, in the rules list:

            {
                test: /\.less$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            },

This was instead of the usual css-loader/style-loader, with its test of /.css$/i

I then added import "./index.less" near the top of my app.ts (after the import of jquery, if that matters).

The file 'public/ts/index.less' contains:
@import (css) 'semantic-ui-css/semantic.min.css';
(public/ts is where my app.ts is).