I recently pushed my projects to the hosting sites but some css arent working. After some inspecting, I found out that <script src="https://cdn.tailwindcss.com/?plugins=forms"></script> are showing errors. It says that cdn.tailwindcss.com should not be used in production.. I installed the tailwind cli according to the documentation. But if I delete the script the css doesnt work, what should i replace that <script src="https://cdn.tailwindcss.com/?plugins=forms"></script> with?
Related
Problem Background:
I have a tauri app set up in Linux (Pop OS), with sveltekit with vite as the frontend framework, and typescript and SCSS being the languages I code for scripts and styles.
Vite is also hot reloadable.
There's an app.scss for overall styles and components scoped scss defined in each components using the <style lang="scss"> tag
Problem Description:
When I run the pnpm tauri dev command, the built executable will be executed for development debugging.
While the scss file app.scss and some component scss is being loaded, other components scss seems to be not working. (See image below)
Since it is using vite as a dev server, I used a browser to visite the website and see if it is a tauri issu, and the webpage in browser seems to be having different components that doesn't load SCSS as expected. (See imaghe below, the palce holder image should have paddings around it but it doesnt)
When I try to update the SCSS for the components then undo the changes, after hot reload, the scss would work again, so there shouldnt be a mistake in my scss syntax or such.
There's also no error when building the application.
I'm trying to use SCSS to style my elements in vue-native project. I just created a fresh project and ran it with Expo and it ran just fine. Then in my App.vue I tried to change <style> to <style scoped lang='scss'> and my app crashed.
I didn't find anything about SCSS in vue-native documentation. So I tried to follow the vue.js docs, I installed sass-loader with npm install -D sass-loader sass, installed fibers... and my app couldn't compile.
So does vue-native support working with SCSS at all? And if it does - how? What did I do wrong?
Vue native is just a wrapper for React Native. React Native doesn't support CSS or SCSS as it has its own StyleSheet system as you are writing native code and styling.
In response to your comment, vue native compiles css-like styles to react native styling, so you can still use vue-native instead of directly writing JS!
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
I'm having a weird problem with Laravel application which has been at Linux Server previously and was working fantastic but while moving to a new IIS Server, I faced alot of problems and the last problem here is some problems in view, while css and JS files are loaded and there is no error in console.
I have posted this question previously, now I'm re-posting it again with more details.
e.g. In local and previous host the fonts are good and everything works correctly, but in IIS server the fonts are bigger than normal and in local and previous server,The Pop Ups are Shown and the fonts are fine As shown in this photo, but, in IIS server, The background gets dark but the popup is not shown and the fonts are bigger Like this photo.
When I check it via Inspect elements from Chrome no error is there and all CSS and JS files are loaded correctly, while everything works but all fonts are bigger and some designs are ruined.
What I have tried:
I tried php artisan dump-autoload and php artisan serve.
Updated the composer.
Cleared the cache.
rewrited the mod and removed index.php from the link.
However, none of them works. I'm loading CSS and JS Files this way: <link rel="stylesheet" href="{{ URL::asset('assets/css/mystyle.css') }}"> and <script src="{{ URL::asset('assets/js/main.js') }}"></script>.
It looks like a very strange and weird problem, I don't know what is wrong while every CSS and JS files as well as every option works fine, but the fonts are bigger, some padding are ignored and some designs are ruined, while in localhost and previous server it was fine.
Can anybody help? and say what is wrong with this?
your problem is not familiar but any way here some tips :
in IIS server you should use URL::secure to connect with assets
post some code so we can find something wrong
use firefox developer edition to find your css problems in production
find the css selectors that effects your font in production
I am publishing my Web App using the VS2013 publish mechanism. For some reason it has just started corrupting the js and css filenames. e.g.
From
<link href="/Content/bootstrap.css" rel="stylesheet"/>
To
<link href="/Content/css?v=puREEettBuwGkRK7y27hOQwXg4qvcAYRnG8wxc0gvnU1" rel="stylesheet"/>
This is only happening on publish to the live site. It works fine on publish to the localhost site. It looks like possibly some kind of versioning.
The defined bundles in BundleConfig are not being expanded, instead parsed with the above result.
Any ideas? I have not seen it before and its not showing up on Google searches. Thanks for any suggestions.
ANSWER:
For anyone else getting this problem - Once I realised it was the Bundles I found this which gave a lots of thoughts. However my specific issue was that I had installed Select2 via NuGet which had added a css directory in Content. As I was creating a Bundle pointing at Content\css these clashed. I removed the css directory and republished. Still didn't work. But when I removed that directory on the server manually it all started working again.