Open shekharj1234 opened 5 years ago
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).
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" },
}, plugins: [HtmlWebpackPluginConfig] }
Any help will be appreciated.