Semantic-UI

Semantic-UI copied to clipboard

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.

Same problem to me, any suggestion?

i've the same problem

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

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 ??

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.

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?

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?

@yanwii thank you, it helped me 🥰

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).