-
Notifications
You must be signed in to change notification settings - Fork 27.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Impossible to get working NextJS+Semantic-UI-less via next.config.js webpack rules. #3340
Comments
Please search for |
OK, will do, but is then someone using Semantic-UI-React and NextJS together? The examples only link in the head to the cloudflare latest release and are done with it, not very much production like, or is it? |
@timneutkens So do I understand you correctly, that it is impossible to work with a local semantic ui CSS file? I also want to avoid loading a css file from CDN server. I tried to do it like it is shown in the semantic ui docs: https://react.semantic-ui.com/usage#semantic-ui-css-package
But this doesn't work. And the nextJS example doesn't use local CSS files... |
I don't know I just decided for now external cdn will do it... So I ended up using style-jsx to override some personal css over semantic, but it works well and I can always get that css on the code and preprocess it with next.config.js, but I don't need it until production so it's not on my table right now |
Would be great to update the example with bundled style loading, especially now that #3578 has been merged! Pulling the styles from the cdn really impacts loading performance. |
Seeing the new sass/less stuff I could try a stab on it, still with external cdn in my codebase |
Thanks!
…On Tue, Jan 30, 2018 at 4:54 PM Agusti Fernandez ***@***.***> wrote:
Seeing the new sass/less stuff I could try a stab on it, still with
external cdn in my codebase
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#3340 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AHu0RdhNQ_GCX0kITlUJTZO91_SMV_cLks5tP7m1gaJpZM4Qq1o0>
.
|
I'm using next 5.1.0, semantic-ui-react 0.79.1 and semantic-ui-css 2.3.1, and it causes the
Is using semantic-ui just completely unsupported? |
@ajsharp I hit the same problem. You just need to install |
Expected Behavior
I expect to be able to use semantic-ui-less and load it's related files via config.next.js webpack rules and plugins.
Current Behavior
Context
I'm hitting some walls myself with my next.config.js to use webpack to load all semantic-ui-less related files...
`
const { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer')
const { ANALYZE } = process.env
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
webpack: function (config) {
config.module.rules.push({
test: /.less$/,
use: [
{ loader: 'style-loader', options: { } },
{ loader: 'css-loader', options: { } },
{ loader: 'less-loader', options: { } },
]
})
config.module.rules.push({
test: /.jpe?g$|.gif$|.png$|.ttf$|.eot$|.svg$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
})
config.module.rules.push({
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
use: [{
loader: 'url-loader',
options: {
limit: '10000',
mimetype: 'application/fontwoff'
}
}]
})
// config.plugins.push(
// new ExtractTextPlugin({
// filename: "[name].[contenthash].css",
// disable: process.env.NODE_ENV === "development"
// })
// )
}
}
`
Depending on the order of the less loaders I get different errors...
style, css, less
`Unexpected token &
/Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less:14
& { @import "definitions/globals/reset"; }
^
SyntaxError: Unexpected token &
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:588:28)
at Module._compile (/Users/agustif/Documents/Git/cruceritis/node_modules/source-map-support/source-map-support.js:492:25)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)`
less-style-css
`Error in semantic-ui-less/semantic.less
Module build failed:
// load the styles
var content = require("!!../css-loader/index.js??ref--6-2!./semantic.less");
^
Unrecognised input
in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`
css-less-style
`Error in semantic-ui-less/semantic.less
Module build failed:
// load the styles
var content = require("!!./semantic.less");
^
Unrecognised input
in /Users/agustif/Documents/Git/cruceritis/node_modules/semantic-ui-less/semantic.less (line 4, column 12)`
css-style-less
`Error in semantic-ui-less/semantic.less
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!../less-loader/dist/cjs.js??ref--6-2!./semantic.less");
"dependencies": { "next": "^4.1.4", "react": "^16.1.1", "react-dom": "^16.1.1", "semantic-ui-react": "^0.77.0" }, "devDependencies": { "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "find-in-files": "^0.4.0", "less": "^2.7.3", "less-loader": "^4.0.5", "ncp": "^2.0.0", "semantic-ui-less": "^2.2.12", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack-bundle-size-analyzer": "^2.7.0" } }
My Environment
The text was updated successfully, but these errors were encountered: