I am trying to turn a html/css template to NExtJS App , the problem is that the app is multi-lang So i have two Css file one for Rtl and other for ltr So i do the folowing:
if(router.locale==='ar'){
require('../styles/Style.rtl.css')
}else{
require('../styles/Style.css')
}
the above Code work fine when I use npm run dev .... but When i use npm run build i got some Conflicts because the two Css file are using same classNames and Webpack combine the two file in one generated css file.
So is there any solution for this or other way to import Css file depending on the Current Lang
Related
i know tailwindcss cli creates only the used class of the project in according with "content" options in tailwins.config.js.
but... is there a way to evitate this optimization (not considering content options and the written code) and let it creates ALL classes in according with the rest of configuration file???
I would like to create a styles lib by tailwind but not on a specific project. I would like create that lib in an angular library to share it then. Any ideas?
UPDATE: i found a command "tailwindcss-cli build -o <output.file>" that create all css from config. It create a very big file but i ma not so confident with it. I don't understand is tailwindcss-cli and tailwindcss are the same. I seems no in fact i can't have the same result using tailwindcss build bue if i call help on both cli i get the same.
thanks
If you are using Laravel, you have to run:
npx tailwindcss-cli build -o public/css/app.css
It will generate all styles (3MB file size). After finishing your application, you can run again:
npm run dev
to remove all unused styles, as it will take only used styles from your php code.
#ask
Hello I want to ask,
Now I'm working on a college project, using laravel, when I enter the Blade Templating stage in Laravel ... I'm having trouble trying to move the .sass file to my Laravel project.
because previously when making the initial appearance of the website that I created, I used sass.
the question is, how do you get the .sass file to run in laravel?
#first-effort
previously I've searched on google and got the same question on stackoverflow... he suggested to install npm "npm install", then move all my css and sass files to resources/assets/sass after that run the command "npm run dev" , then it says all files will go to the app.css file
but after I try to run it, the result is still the same.
#my sass photo
https://imgur.com/a/xVNChUh
#Project display now when run
https://imgur.com/a/VQl242R (there is some styling because I made some styling in main.css, but the rest is in the sass file, so it looks messy like that)
#My Project display "should" (this is still running using html css on local)
https://imgur.com/a/Az8nx1W
Please help
I'm developing with vue.js and vue cli 3. Currently I handle my CSS styles with SASS and compile them with Koala-app. At the moment I am still using it because it is very easy to configure the main.scss and their respective files, and then compile it with autoprefix, in compressed format and with source map to another folder with the name styles.css, I keep the following structure:
I need to replace koala with NPM SASS Loader, how do I replicate this same configuration with VUE CLI 3? The information for the webpack should be added in vue.config.js? Or where? and what would be the parameters to achieve the same effect?
I'm using a FileGator for displaying the data in the browser.
it was built with Vue.js for frontend.
But I'm not able to customize all the CSS of the app even though I added customized CSS in the app.css in the dist folder. Hope someone gives me a solution.
Folder dist/ is where compiled css and js are placed. If you're using npm build process as explained here https://docs.filegator.io/development.html dist folder will be overwritten each time npm build is triggered.
If you don't want to build with npm then you can use provided configuration.php file to add a simple style:
'add_to_head' => '<style>body{background:red}</style>',
or your own css file:
'add_to_head' => '<link href="/somewhere/your.css" rel=stylesheet>',
I want to customize Bootstrap 4 theme such as colors, fonts, etc..
I read the instructions from Bootstrap website saying that I need to create custom.scss file and import Bootstrap’s source Sass files like this
// Custom.scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
I'm new to both Sass and NodeJS and I do not know how to get started with a NodeJS and Sass project.
I went as far as installing NodeJS and Sass on my Mac using brew. I also installed Bootstrap by typing:
npm install bootstrap
This is the most progress I have made. I do not know in which path the bootstrap files are installed when I did the command npm install bootstrap and also I do not know how to bring that Bootstrap installation into my project folder.
Could anyone please provide some information or point me to a resource on how to get started with a NodeJS and Sass project so I can customize Bootstrap 4 theme using Sass.
You have to run the npm install bootstrap command inside your project directory. Bootstrap and its files will then be installed into the directory node_modules/bootstrap inside your project directory.
Now, when placing your custom scss files into this folder, they will be able to access the node_modules directory, in which bootstrap is.
You can then create a custom building pipeline using npm tools for compiling scss files to css. This requires more in-depth knowledge on node.js and NPM, but that is the usual and recommended way of doing it.
If you just want to compile the scss once and work with the css from there without having to use node.js more in depth, you can use packages like scss-compile and then use console commands like node-sass -rw scssFiles -o cssOutputFiles to compile your custom theme once.