I'm using styled-jss in my app. During development it compiles my components to ugly classnames and I see this in my Web Inspector
<div class="div-2-0-1-1">
<div class="div-3-0-1-2">
<div class="div-4-0-1-4">
<div class="div-5-0-1-5"></div>
<div class="div-6-0-1-6"><textarea class="textarea-7-0-1-7"></textarea></div>
<div class="">
<div class=""><input class="input-8-0-1-8"><input class="input-9-0-1-9"></div>
</div>
</div>
</div>
</div>
I'd rather want to see component names in my classnames. I've set mode: 'development' in my webpack.config.js but this didn't help. Is there something I can do about it?
Automated way to do that would require to build a babel plugin that would take the variable/identifier name and pass it to the styled function and later use it as part of the className. This doesn't exist yet and we are working on a new version here if you want to follow https://github.com/cssinjs/jss/pull/1094
Related
I have html stored in the database and I want to render it on my react page and for that I used
import low from "../css/low.module.css";
<div dangerouslySetInnerHTML={{__html: data}}/>
and this works perfectly. I am also using css modules and I want this html (from database) to detect the css.
I can not use cssFileName.className as it is stored in the database.
For example
data = <div class="news_page_detail">
<p class="news_page_detail">My Para1<br class="Pc_only">My Para2</p>
<p class="news_page_detail">My Para3</p>
<p class="news_page_detail">My Para4
</p>
<a href="/someLink" class="btn-pink-b ovbg ">
<div class="btn-inner">
<div class="ovbg_pink"></div>
<span class="btn-pink-b-txt">My span1</span>
</div>
</a>
Is there any solution so that I apply the css modules here. I dont want to import the css as conventional way because they are interfering with the other css.
Please help.
You can try the html-react-parser library. I have used it and I can style inline my content.
import parse from 'html-react-parser'
<div
style={{ color: 'black' }}
>
{parse(item?.content)}
</div>
So I'm trying to build and deploy a Vue 3 website using Heroku. When I test the website locally using npm run dev it works just fine. However, when building I get the following error
Error:
Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
error during build:
Error: Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
at error (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:198:30)
at ModuleLoader.handleResolveId (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22508:24)
at C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22471:26
code:
Note: it's a fragment of the overall code, this is where the "issue" is. Also, I'm using Bulma to style
<section class="section">
<!-- to center columns, the parent has to be the image which is impossible -->
<div class="card">
<div class="card-image">
<figure class="image is-2by1 level">
<img src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
<div id="title-overlay-pad" class="is-overlay level-right">
<div id="title-overlay-background" class="has-text-centered">
<p id="title-home-page">delivAERO</p>
<p id="tagline-home-page">Revolutionizing the World's Delivery Infrastructure</p>
</div>
</div>
</figure>
</div>
</div>
</section>
Heiarchy:
UPDATE: ANOTHER SOLUTION
After getting a lot of help from Daniel, using the import method mentioned in their answer I was still getting errors. I assume this is more about the way the project is setup, but I found another solution.
The way, this post mentions is, it should be imported is as
import img from '#/assets/path/to/img.png'
Note: I have all my images in the assets folder on the src directory
However, this may give the following error:
error TS1232: An import declaration can only be used at the top level of a namespace or module.
From this post, the reason for this error is because imports should be declared first before any Javascript code.
In other words, it should look like:
<script setup lang="ts">
//any other imports here, before javascript code
import img from '#/assets/path/to/img.png'; // ASSETS
// Javascript code here
</script>
I'll still be accepting Daniel's answer as I believe that should be the solution for most.
Update
both require and import should work with default setup (used latest ATTOW vue-cli 5.0.6 and vue 3.2.13)
I've setup a new project with vue-cli and updated the helloWorld component with:
<template>
<div class="hello">
<img src="/images/logo.png">
<img :src="img"/>
<img :src="require('../assets/logo.png')">
</div>
</template>
<script setup>
import img from "../assets/logo.png"
</script>
All three versions work for me. If you are still having issues, I'd recommend the 1st option <img src="/images/logo.png">. The only thing you need to do is to move the image (logo.png) into the public folder (public/images/logo.png)
I've also noticed that with the default settings, the images that are "imported" or "required" get injected into the js as base64, which I'm not a fan of, so unless the configuration is updated to handle those, I'd recommend the first option.
AS an aside, I would also recommend removing spaces from the resource and directory names. You have a space in Design Pics, which servers should all handle properly, but it's not guaranteed .
When you use the image like this in the template, it is handled as a string
<img :src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
In order for Vue to bundle the asset it needs to know about it.
you can do this reference in-template
You can import it and then pass the reference the image as the variable in the template
<template>
<div>
<img :src="myImg" alt="Drone Image" width="1280" height="720">
</div>
</template>
<script setup>
import myImg from './assets/Design Pics/Drone/7_0030.png'; // import asset
</script>
or use require in the template:
<template>
<div>
<img :src="require(./assets/Design Pics/Drone/7_0030.png)" alt="Drone Image" width="1280" height="720">
</div>
</template>
Is there is any ant design CSS documentation like bootstrap available?
We are using ng-zorro-antd framework to build Angular application.
ng-zorro-antd provide grid compnents:
<div nz-row>
<div nz-col nzSpan="6">col-6</div>
<div nz-col nzSpan="6">col-6</div>
</div>
But its not feasible to use angular component at every html design/structure we want something like the below class.
<div class="ant-row">
<div class="ant-col-6">col-6</div>
<div class="ant-col-6">col-6</div>
</div>
Also Need to know about performance of CSS based grid Vs component or directive based structure.
Is there is any performance impact?
If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.