I have one problem here and cant solve it. I want to install Semantic ui on Next.js application via npm but it's impossible please help me.
if u have some ideas please help me
npm install semantic-ui
I tried this one but nothing changes.
I use semantic-ui-react in my next.js project and I like to use my own theme. Follow the instructions below to get going.
First and foremost run npm install --save-dev semantic-ui. Soon you will see an interactive prompt. Answer questions presented the following way.
Set-up Semantic UI - Choose ‘Express (Set components and output folder)’
We detected you are using NPM Nice! Is this your project folder? - Choose ‘Yes’
Where should we put Semantic UI inside your project? Hit return (This will put a directory named ‘semantic’ in root)
What components should we include in the package? This is upto you. Check the ones you need and uncheck the ones you don’t.
Should we set permissions on outputted files? Choose ‘No’
Do you use a RTL (Right-To-Left) language? Pick your favourite option
Where should we output Semantic UI? Write a custom path in your terminal ../static/semantic/dist
Now we are going to need gulp to run compilation tasks to build your theme.css under dist/ directory that you will use in your project.
Run yarn add --dev gulp
and add the following to your package.json under “scripts” like this
{
"dependencies": {
"next": "^7.0.2",
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"scripts": {
"dev": "next",
"build-semantic": "cd semantic && gulp build-css build-assets”,
"watch-semantic": "cd semantic && yarn run build-semantic && gulp watch"
},
"devDependencies": {
"semantic-ui": "^2.4.2"
}
}
Now if you run yarn watch-semantic, gulp will compile source files and create a dist/ under semantic/. Under dist/ you will see semantic.min.css
We are just about done. Now you have to include this .css in page/component that is shared by all pages or components. Fortunately, next.js has a solution.
_document.js (https://nextjs.org/docs/#custom-document)
Create _document.js under pages/ and include your recently created semantic.min.css like below.
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<html>
<Head>
<link
href="/static/semantic/dist/semantic.min.css"
rel="stylesheet"
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</html>
)
}
}
If you want to do the following in _app.js:
import 'semantic-ui-css/semantic.min.css'
You will need: https://github.com/zeit/next-plugins/tree/master/packages/next-css.
Then, you can follow the advice I found here: https://github.com/zeit/next-plugins/issues/432.
Specifically, see antonioOrtiz 24 Mar comment.
There's a nice starter project that uses Next.js + Fomantic-UI + Styled Components.
https://github.com/skydiver/nextjs-semantic
For Semantic-UI version, check out v1.1.0 branch.
https://github.com/skydiver/nextjs-semantic/tree/v1.1.0
Another alternative I haven't seen mentioned in the comments yet:
Create a layout wrapper around your pages and import there the library CSS from the CDN.
import Head from 'next/head';
const Layout = () => (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" rel="stylesheet" />
</Head>
{children}
</>
);
export default Layout;
And in your pages:
import Layout from '#components/Layout';
const AboutPage = () => (
<Layout>
<article>
I am the about page
</article>
</Layout>
);
export default AboutPage;
It will allows to do some quick tests without having to install any additional packages.
Related
In a svelte project, I want to import some css files, and I cant make this plugin works : https://github.com/thgh/rollup-plugin-css-only
here is my config
project/rollup.config.js
/* other imports */
import css from 'rollup-plugin-css-only';
export default {
plugins: [
/* svelte here, */
css({ output: 'public/build/extra.css' }),
/*
alternatives I tried :
css(),
css({ output: 'extra.css' }),
css({ output: 'bundle.css' }),
css({ output: 'public/build/bundle.css' }),
*/
]
};
I put intentionally the output in a separate file project/public/build/extra.css instead of the default project/public/build/bundle.css to see if the file will be created; and the file is never created
I searched with find . -type f -name "*extra.css" in the project root directory
the output file is included inside the project/public/index.html :
<link rel='stylesheet' href='/build/extra.css'>
and that gives me a log with error 404, which is normal if it was not created
I tried different ways to import :
project/src/component/exemple.css
inside the component :
project/src/component/exemple.svelte
<script>
import './my_style.css';
</script>
<style>
#import './my_style.css';
</style>
<style src='./my_style.css'>
</style>
the plugin is present in the package.json, and I did npm install --save-dev rollup-plugin-css-only
ok my bad, the problem was simple : I didn't re run the npm start command, because I misconfigured my docker, so the changes in rollup.config.js couldn't take place :p
so dumb
by the way, I shouldn't include the public/build/ into the path, this will only create a nested public/build/ folder inside the public/build/ folder
and also, the output file can be bundle.css, it will add the css to the bundle.css file, no need for an extra file
finally, this wil produce a global css, not a scoped one
I'm new to next.js and am trying to migrate a project. I'm having trouble knowing how to include Bootstrap.js file in a page or in the entire site. I see how to include the CSS but not the JavaScript. Do I just add a cdn path to the public index.html file?
It's hard to know if it's getting included, because I don't see it pulling in in the network tab.
You should be creating a _app.js file. This file lives in the root of your pages directory. This will allow you to control all of the aspects of what's loaded app wide.
import 'bootstrap';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
If however you load from the CDN then you would need to update your layout to load the script directly.
export function Layout(props) {
return (
<>
<Head>
<script src="...acdnpath"/>
</Head>
{props.children}
</>
);
}
I would recommend the former rather than the latter approach. This will allow next to start smartly detecting whats being loaded and when to help improve performance.
I use Electron Forge for an Electron app. I also make use of React and TypeScript, and I would also like to use SASS, but my current attempts fail. Apparently SASS already works without adding any new dependency to the package.json, as electron-compile takes care of that. That's what it sais on electronforge.io under Develop.
I tried adding the style.scss as an import within the first TypeScript class app.tsx, but after adding this compiling does not work anymore:
import "./style/style.scss";
leads to:
[24717:0221/194746.779571:ERROR:CONSOLE(7830)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/shell.js (7830)
I also tried to put a link element into the head element in the index.html, but this does not do the trick either. Compiling works, but no CSS works are done:
<link rel="stylesheet" href="style/style.scss">
also tried:
<link rel="stylesheet" type="text/css" href="style/style.scss">
and:
<link rel="stylesheet" type="text/scss" href="style/style.scss">
and:
<link rel="stylesheet" type="text/sass" href="style/style.scss">
The 'style.scss` file:
body {
background-color: #ff0000;
color: #0000ff;
}
But none of them work. What must I do to make use of SASS files within Electron Forge?
I've managed to get this working, little bit late but hopefully this helps someone in the future. On an example app using webpack (as I'm pretty sure this is required), Electron Forge generates some js files in the root directory for webpack config.
yarn create electron-app my-new-app --template=webpack
or
yarn create electron-app my-new-app --template=typescript,webpack
https://www.electronforge.io/templates/typescript-+-webpack-template
Following this, there's two files in the project root, webpack.rules.js and webpack.plugins.main.config.js. These need to be modified to work properly, and you need to install sass-loader as a dev dependency. node-sass was recently deprecated so sass-loader will handle that okay.
Your webpack.plugins.main.config.js file should include:
module: {
rules: require("./webpack.rules"),
},
resolve: {
extensions: [
".js",
".ts",
".jsx",
".tsx",
".css",
".json",
".scss",
".sass",
],
},
Additionally, your webpack.rules.js file should have a new rule added:
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
This is what's provided in the documentation on the page for sass-loader, properly implemented into electron forge. https://www.npmjs.com/package/sass-loader
Finally, your renderer.js (or renderer.js) should be adapted to import a scss file rather than a css file.
import './index.scss';
From there, you should be good to go!
You need to compile the SASS file to generate a CSS file and then put it in the index.html
Yo can use the console to try it
# Path to SASS File > OUTPUT path to CSS File
sass style/sass/style.scss style/style.css
then, import the file in the head
<link rel="stylesheet" href="style/style.css">
I want to create a custom theme with semantic-ui, but they don't have official support for Aurelia yet and a lot of unwanted errors pop up after npm install semantic-ui --save. I want a clear answer and aurelia.json dependency code for semantic. Thanks.
1. aurelia.json dependency
"dependencies": [
...,
{
"name": "semantic-ui",
"path": "../node_modules/semantic-ui/dist",
"main": "semantic.min.js",
"resources": [
"semantic.min.css"
]
}
]
Side note: you might also have to list dependencies using the "deps" value. Try it without this at first, and if you need to, you can see what other libraries this repo requires.
2. Import JavaScript file
In either app.js or in each view-model you'll be using the library, use one of these imports (try them one at a time; one of them is likely to work).
import * from 'semantic-ui';
import 'semantic-ui';
3. Require CSS
In either app.html or in each view you'll be using the library, use the following require statement.
<template>
<require from="semantic-ui/semantic.min.css"></require>
<!-- rest of your code here -->
</template>
4. Legacy prepend
If none of the above works, import it as a legacy repo using the prepend section of aurelia.json (before the dependencies section) like this:
"prepend": [
// probably a couple other things already listed here...
"node_modules/semantic-ui/dist/semantic.min.js"
],
First: If you don't need to customize Semantic UI, you can simplify by using pre-built package, downloadable as a ZIP. See Semantic UI "Getting Started" for that tip.
This is not elegant, but it works:
I assume you want to complete package, with build tools and everything. That gives you the option to customize, change themes, etc.
These are the problems I see:
Semantic UI uses Gulp 3.x, which is the official version, while Aurelia CLI uses Gulp 4, which is in alpha. This gives errors if you try to npm install Semantic into an Aurelia project.
Importing the CSS/JS files in aurelia.json only works with the node_modules/semantic-ui/dist version -- not the built semantic/dist version, which means your customizations don't get included.
My solution/workaround:
Install Semantic UI in a separate folder, e.g. aurelia_project_root/SUI. Solves Gulp version problem. You can now gulp build your Semantic distro from within that directory. Note: You need to create the folder outside of the Aurelia project, then move it inside as a sub-folder the Aurelia project root. This gives you a local version of Gulp inside the SUI/node_modules.
Edit aurelia.json to add SUI and JQuery:
"jquery",
{
"name": "semantic-ui",
"path": "../SUI/node_modules/semantic-ui/dist",
"main": "semantic.min.js",
"resources": [
"semantic.min.css"
]
}
To install JQuery: npm install jquery --save.
Edit semantic.json inside SUI to change the output directories to save the built files in the node_modules:
"output": {
"packaged": "..\\node_modules\\semantic-ui\\dist\\",
"uncompressed": "..\\node_modules\\semantic-ui\\dist\\components\\",
"compressed": "..\\node_modules\\semantic-ui\\dist\\components\\",
"themes": "..\\node_modules\\semantic-ui\\dist/themes/"
},
This is because of problem 2 - that Aurelia CLI only is able to import SUI as long as it is within node_modules (probably something I do wrong).
Then the workflow becomes:
change SUI properties
build SUI (gulp build inside SUI/semantic)
build/run aurelia (au build)
Of course, you can update your gulp tasks in aurelia to improve this workflow.
You'll also need to link or copy fonts/pngs. For now I've just symlinked it, ln -s path-to-dist/themes themes from you Aurelia project folder.
Your HTML:
<require from="semantic-ui/semantic.min.css"></require>
...
<select ref="states" class="ui fluid search dropdown" multiple="">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
...
</select>
Code-behind:
import * as $ from 'jquery' // import $ from 'jquery';
import 'semantic-ui';
attached() {
$(this.states).dropdown()
}
This should give you a very cool drop-down.
I've installed a new library with npm, so far so good. Now I want to import the css in there to my project, obviously I shouldn't link directly to the node_modules folder. So, is there a simple to do import this to my project? I'm using Angular CLI.
I have an idea, but I'm not sure if it's a good idea - I thought about installing gulp/grunt and then require the style there and output it as vendor.css into my project. Is it even possible?
First go to your angular-cli-build.js file and add an entry in the vendorNPMFiles array. This will copy your node_modules files to the /vendor directory during the build. Now you can reference your css in your index.html as /vendor/folder/file.css.
Eg: angular-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'bootstrap/dist/**/*.*',
'lodash/lodash.min.js'
]
});
};
index.html snippet
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">