How do I add Semantic-UI to Phoenix?
Semantic-UI is installed in a folder and updated using NPM, and the actual CSS and Javascript files are built using GULP. Where should the full install folder be placed?
Can it be automatically updated through Mix like the rest of the dependencies?
Should the generated css and javascript be placed in project/web/static/css (or /js) or /vendor?
How do set up Gulp/Sematic-UI configuration to automatically put the files in the right places?
Again, can Mix run Gulp/Semantic-UI build automatically?
Where should the full install folder be placed?
Actually, you just need 2 files: semantic.js & semantic.css.
if you did npm install --save semantic-ui you should find them in ./semantic/dist/
So, where should these 2 files be placed?
It depends on ... are you brunch or webpack? What is relevant to a phoenix app is to find the static files (css, js, font, img, ...) in the ./priv/static folder as you can see in the endpoint.ex Plug.Static. Phoenix is not aware of the directory where you did put these files before running brunch, webpack or/and gulp.
Can it be automatically updated through Mix ...
Yes, add a script in package.json, modify the watchers in config/dev.exs
Should the generated css and javascript be placed in project/web/static/css (or /js) or /vendor?
Same answer, are you brunch or webpack?
What is relevant to a phoenix app is to find the static files (css, js, font, img, ...) in the ./priv/static folder as you can see in the endpoint.ex Plug.Static. Phoenix is not aware of the directory where you did put these files before running brunch, webpack or/and gulp.
How do set up Gulp/Sematic-UI configuration to automatically put the files in the right places?
Check out the file ./semantic.json to set up the output of the gulp build command.
can Mix run Gulp/Semantic-UI build automatically?
Yes, add a script in package.json, modify the watchers in config/dev.exs
This is not easy, and I recommend you to first start using npm semantic-ui-css and when your build works well to switch to npm semantic-ui
It is quite easy to integrate Semantic UI LESS only Distribution with Phoenix application with a bit of a trick. I would suggest you to use Webpack instead of brunch/gulp as it is relatively popular with lot of plugins and easy to configure.
Before starting with the procedure, it is expected that the Phoenix App is installed with default Brunch build tool and it's working.
Integrating Webpack
Please follow my Semantic UI and Webpack integration detailed guide with in-depth step by step procedure. This answer is in reference to this article.
Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack
Integrating Semantic UI
Before we install Semantic UI, we need to put some configurations in place. We will create a new semantic-fix file.
vim web/static/lib/semantic-fix.js
Paste the following contents in the semantic-fix.js file which we just created. This file will take care of putting all Semantic UI assets in place for using it with our application
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"#fontPath : '../../themes/",
"#fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
We are going to make a custom theme.config file for Semantic UI. Hence change the path location in semantic-fix.js file as follows:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
Replace it with following code:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../web/static/css/theme.config';\n",
'utf8'
);
I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.
Add semantic-fix.js needs to run on every postinstall callback while installing npm packages. Hence we will place it as follows under package.json scripts section.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Now it's time to install Semantic UI LESS package. After the installation, the semantic-fix.js file will be called from the postinstall script.
npm install --save semantic-ui-less && node semantic-fix.js
After Semantic UI finishes installation, we need to copy the node_modules/semantic-ui-less/theme.config.example to web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Override the existing paths to our paths
/* Path to site override folder */
#siteFolder : '../../web/static/css/site';
&
// #import "theme.less";
#import "~semantic-ui-less/theme.less";
Copy semantic LESS initialising file node_modules/semantic-ui-less/semantic.less to web/static/css. This file imports different component styles.
Change the locations for this file's import statements from #import "definitions/...."' to #import "~semantic-ui-less/definitions/...."
Similarly we need to add semantic.js file to web/static/js folder to import all JavaScript components as follows:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js is the entry file in our webpack config. Hence we need to import all the files including Semantic UI files to app.js. Add the following lines at the end of app.js file
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
The integration is now complete and ready to run. Semantic UI is now completely intergrated with webpack and it's time to give it a try. Run the Phoenix server mix phoenix.server from project root. It should trigger webpack to compile all the files including semantic-ui - mix phoenix.server
This procedure is documented in more detail in my article (Linked on the top) which can be referred if there is any confusion.
Hope that helps.
It is quite easy to integrate Semantic UI LESS only Distribution with Phoenix application with a bit of a trick. I would suggest you to use Webpack instead of brunch/gulp as it is relatively popular with lot of plugins and easy to configure.
Before starting with the procedure, it is expected that the Phoenix App is installed with default Brunch build tool and it's working.
Integrating Webpack
Please follow my Semantic UI and Webpack integration detailed guide with detailed step by step procedure. This answer is in reference to this article.
Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack
Integrating Semantic UI
Before we install Semantic UI, we need to put some configurations in place. We will create a new semantic-fix file.
vim web/static/lib/semantic-fix.js
Paste the following contents in the semantic-fix.js file which we just created. This file will take care of putting all Semantic UI assets in place for using it with our application
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"#fontPath : '../../themes/",
"#fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
We are going to make a custom theme.config file for Semantic UI. Hence change the path location in semantic-fix.js file as follows:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
Replace it with following code:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../web/static/css/theme.config';\n",
'utf8'
);
I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.
Add semantic-fix.js needs to run on every postinstall callback while installing npm packages. Hence we will place it as follows under package.json scripts section.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Now it's time to install Semantic UI LESS package. After the installation, the semantic-fix.js file will be called from the postinstall script.
npm install --save semantic-ui-less && node semantic-fix.js
After Semantic UI finishes installation, we need to copy the node_modules/semantic-ui-less/theme.config.example to web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Override the existing paths to our paths
/* Path to site override folder */
#siteFolder : '../../web/static/css/site';
&
// #import "theme.less";
#import "~semantic-ui-less/theme.less";
Copy semantic LESS initialising file node_modules/semantic-ui-less/semantic.less to web/static/css. This file imports different component styles.
Change the locations for this file's import statements from #import "definitions/...."' to #import "~semantic-ui-less/definitions/...."
Similarly we need to add semantic.js file to web/static/js folder to import all JavaScript components as follows:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js is the entry file in our webpack config. Hence we need to import all the files including Semantic UI files to app.js. Add the following lines at the end of app.js file
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
The integration is now complete and ready to run. Semantic UI is now completely intergrated with webpack and it's time to give it a try. Run the Phoenix server mix phoenix.server from project root. It should trigger webpack to compile all the files including semantic-ui - mix phoenix.server
This procedure is documented in more detail in my article (Linked on the top) which can be referred if there is any confusion.
Hope that helps.
Related
I'm trying to use Vite.js in a WordPress theme to process my asset files.
I've created a vite.config.js file:
import { defineConfig } from 'vite';
export default defineConfig({
root: './resources',
build: {
rollupOptions: {
input: ['./resources/test.scss'],
},
},
server: {
port: 1337,
},
});
And I'm loading the Vite.js client plus the asset from the server:
<script type="module" src="http://127.0.0.1:1337/#vite/client"></script>
<link rel="stylesheet" href="http://127.0.0.1:1337/test.css?ver=6.0.1">
But this results in a 404 error for the test.css file. When using a css/js file instead of scss, everything including HMR works fine. I'm also not getting any warning about sass needing to be installed, so I assume Vite.js skips the scss file completely for some reason.
Is it a good idea to use the rollupOptions.input option for just listing resources in the first place or is there a better way? As I'm not building a JS application, there's no entry point such as an index.html, just some js/scss files I want to process.
You need to install SASS npm add -D sass https://vitejs.dev/guide/features.html#css-pre-processors.
The input file is a JavaScript file input: 'main.js', that itself imports the SCSS files import './resources/test.scss';.
Generally, the backend integration guide would help you with the setup for a multipage app like WordPress https://vitejs.dev/guide/backend-integration.html.
I'm currently trying to build a shared component library that I can use across my different projects.
This is my index.js file:
import Avatar from "./components/Avatar";
import Heading1 from "./components/Heading1";
import styles from "./global.css";
export { Avatar, Heading1 };
The reason I am loading global.css is because I want to use a custom font.
When I run babel src -d build, it seems to skip my CSS file:
myapp-ui edmund/theming % npm run build
> #myapp/ui#0.1.0 build /Users/edmundmai/Documents/src/myapp/myapp-ui
> babel src -d build
src/components/Avatar.js -> build/components/Avatar.js
src/components/Heading1.js -> build/components/Heading1.js
src/index.js -> build/index.js
src/stories/Avatar.stories.js -> build/stories/Avatar.stories.js
src/stories/Headling1.stories.js -> build/stories/Headling1.stories.js
src/theme.js -> build/theme.js
When I go into one of my apps and try to load this shared component library, it also throws an error about a missing CSS file:
Failed to compile.
../myapp-ui/build/index.js
Module not found: Can't resolve './global.css' in '/Users/edmundmai/Documents/src/myapp/myapp-ui/build'
How would I load a CSS or custom font for a shared component library?
I'm having errors when I try to build my VueJS project with the style sheets.
My error when I run "yarn run dev --watch" produces these errors:
c:\wamp\www\DBViewer2>yarn run dev --watch
yarn run v1.6.0
warning package.json: No license field
$ encore dev --progress=true --watch
Running webpack ...
0% compiling
Webpack is watching the files…
95% emitting ERROR Failed to compile with 1 errors 16:00:56
This dependency was not found:
* !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./assets/App.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./A
I'm not sure what is causing this. It appears it is looking for the files in the wrong location?
Here is my App.vue file:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss-loader">
/* Import Font Awesome Icons Set */
$fa-font-path: 'font-awesome/fonts/';
#import 'font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: 'simple-line-icons/fonts/';
#import 'simple-line-icons/scss/simple-line-icons.scss';
/* Import Bootstrap Vue Styles */
#import 'bootstrap-vue/dist/bootstrap-vue.css';
/*// Import Main styles for this application*/
#import './assets/scss/style';
</style>
Here is my webpack.config.js:
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public_html/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('main', './assets/main.js')
.addEntry('vendor', './assets/js/vendor.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
.enableVueLoader()
// allow sass/scss files to be processed
.enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
Any suggestions is greatly appreciated. Have spent 2 days now trying different things and research on google. I'm just not familiar enough with symfony/encore and this is my first vuejs project.
In order to be able to use SCSS in a Vue template, you need to declare in the single file component the following style block:
<!-- Those styles are not scoped to that particular component -->
<style lang="scss">...</style>
<!-- Or those styles are scoped to that particular component -->
<style lang="scss" scoped>...</style>
You can even use both in the same file, if needed.
You'll also need to install the correct node dependencies by running:
npm install --dev node-sass sass-loader
This should then work out of the box when used in a project initialized with vue-cli.
However you could need to add this in your webpack 'test' configuration to make lang="scss" work in tests when using vue-loader's ?inject option:
resolveLoader: {
alias: {
'scss-loader': 'sass-loader',
},
},
I want to create one css/js file from multiple css/js files. Multiple addEntry not working, please check my code and give me the solution.
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('web/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// uncomment for legacy applications that require $/jQuery as a global variable
//.autoProvidejQuery()
// uncomment to define the assets of the project
.addEntry('js/app', './assets/js/app.js')
.addEntry('js/uploader', './assets/js/uploader.js')
.addStyleEntry('css/icons', './assets/css/icons.scss')
.addStyleEntry('css/app', './assets/css/app.scss')
.addStyleEntry('css/uploader', './assets/css/uploader.scss')
// uncomment if you use Sass/SCSS files
.enableSassLoader()
.enableBuildNotifications();
module.exports = Encore.getWebpackConfig();
And add common jQuery and after adding the js files some function is undefined, why?
You only need one addEntry call. The solution I use to do that is to create a main.js file where I import all the file. Something like this for example:
// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './global.css';
import './easy-autocomplete.custom.css';
// JS
const $ = require('jquery/dist/jquery.min');
const jQuery = $;
import 'bootstrap';
import 'jscroll/jquery.jscroll';
import 'easy-autocomplete';
import './global.js';
And then you can use this file in your addEntry like this:
.addEntry('app', './assets/main.js')
After running Encore, you will get a web/build/app.js file and web/build/app.css file
Multiple .addStyleEntry will create multiple files. You can pass an array into .addStyleEntry to make a single css file out of multipe css/sass/less files like:
.addStyleEntry('style', ['./src/sass/style.scss', './node_modules/swiper/dist/css/swiper.css'])
This will create a style.css. The order of the array entries matches the output in the css file.
Here is my situation :
Web site powered by Angular 4
Initialised with Angular Starter Kit
Using Semantic UI as CSS framework
Here is my issue :
Adding Semantic UI to webpack has no effect.
Here is what I tried :
(I followed the official Angular documentation for webpack)
Add semantic-ui to package.json from terminal
npm install semantic-ui-css --save
Add vendor bundle to the entry property in webpack.common.js
[...]
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'vendor': './src/vendor.ts'
},
[...]
Create the src/vendor.ts file and set its content to :
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// My CSS framework
import 'semantic-ui-css';
What I got :
Webpack build without error, the vendor bundle is created :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor
And webpack inject the bundle script in the HTML page :
<script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body>
But the visual doesn't change (but should I check it with CDN) and I don't see the vendor.bundle.js file in the dist folder.
I probably miss something, what is it ?
Below statement only imports semantic.js as package.json is pointing
to that file.
import 'semantic-ui-css';
To import CSS, you can add the below:
// To import CSS
import 'semantic-ui-css/semantic.css';
OR in src/styles/styles.scss
#import '../../node_modules/semantic-ui-css/semantic.css';