I have many components that import hosted css files as follows:
<style scoped>
#import 'https://test.com/path/to/my-stylesheets/styles.css';
</style>
What I am wanting is a way to remove these imported stylesheets on an end lifecycle hook such as beforeDestroy.
Is this possible?
What you're trying to do depends on vue-loader (if you're using webpack) and it looks like a counter intuitive. So, there's no reason for styles to be removed from document. What you can do is to define your CSS classes in stylesheets or as a data variable in viewmodel and assign/remove those classes during Vue component's lifecycle like beforeCreate/beforeDestroy etc. if you like.
Related
Is there a way to specify css that can achieve the following?
The css of the parent component does not affect the child component
Child component css does not affect the parent component
The child component is the one obtained by API of the external website. At this time, this child component will affect the style of the parent component (I cannot edit the style of the child component).
The main style is read by layout.
It is a style that has a large influence range, and it is troublesome to have each component read by scoped, so I want to avoid it.
I’m not sure if this will work. But you should try using sass. And import the css with a plain css and then use the imported file inside sass. Just like this
<script>
#import 'http://123.com/style.css'
</script>
<script lang=“sass”>
#app {
#include style
}
</script>
If this doesn’t work try with one of these Solutions - Stack Overflow
But I know this is your go to.
Problem:
I have an angular app with a lot of components and sub components. These were generated by running ng generate component <component-name> so each one has the same style of component tag:
#Component({
selector: 'app-<component-name>',
templateUrl: './<component-name>.component.html',
styleUrls: ['./<component-name>.component.css']
})
My understanding is that all CSS related to this component should be placed in src/<component-name>/<component-name>.component.css and should be automatically applied to the component when it is rendered.
This does not seem to be the case however, as when I put certain instructions in that CSS file they are seemingly ignored. The ones that are the most notable offenders so far are things like text-align and any kind of color tag, while tags like font-family or vw/vh work just fine.
On the other hand, when I put my CSS in a file like src/styles.css and place an import in index.html for this file, any CSS I have there applies correctly but applies itself to ALL components. This wouldn't be a problem except some components necessarily share naming conventions, and I have no way to specify that I don't mean [col-id="car"] in table2.component.ts but rather [col-id="car"] in table5.component.ts.
EDIT:
Here is an example of what I'm talking about:
My current grid looks like this:
All cells in a given column share the value of the col-id tag:
My slab-grid.component.css file contains sizing instructions for the grid itself, and a font specifier:
.slab-grid {
width: 45vw;
height: 80vh;
font-family: monospace;
}
I know these apply properly because if I remove the size definition, the grid becomes 1px by 1px, and if I remove the font-family, the whole grid turns back to the normal font as seen below. Column "Thk" does not change back because another grid in another part of the app has the same col-id and the overarching styles.css file contains a definition for [col-id="thk"]:
So in my understanding if I were to add the following statement to slab-grid.component.css
[col-id="yard_seq"] {
text-align: right;
}
I expect I would see column Yard Seq which has col-id="yard_seq" become right aligned. In reality when I add this statement to slab-grid.component.css, nothing changes. If I however go to the primary css file for the project located in src/styles.css and add the same statement, I get the below result:
Question:
Why does my CSS not always apply to the relevant component if placed in src/<component-name>/<component-name>.component.css?
OR
Is there a way to make the elements of src/styles.css only apply to the page when certain components are rendered?
Solution:
I've found an acceptable solution to this issue. If I modify my own /src styles selectors from [col-id="thk"] to use the descendant selector .slab-grid [col-id="thk"], then I can make my styles override the conflicting ones with a !important without editing the conflicting files.
Every component has hes on styles if you want to share the same styles between multiple components you must create a shared CSS file and then import the file on the styles.css or much better solution add the shared CSS files on the angular.json config files.
the styles from the parent component do not apply to the child components.
only and only if you add the same styles on the styles.css or include the file on the angular.json
example
"styles": [
"src/styles.scss",
"src/scss/theme.d.scss",
"src/scss/global-scrollbar.d.scss",
"src/scss/acrylic.scss",
"src/scss/buttons.scss",
],
"scripts": [
"./node_modules/moment/min/moment.min.js"
]
so i am working on vue spa project and want to integrate ckeditor5 into it. so i just npm install ckeditor5 vue version from here and everything works fine by following instalation guide on the github site.
but after using it, i realize that i need to make custom build from there and thats mean i need to fork the build and clone it and do something on it and then npm build and then add it into my project
well the problem is i don't know how to include those css and js to my vue spa component (i only need it on specific component so i don't find any benefit by putting it avaiable on global by just adding css and js file to the html)
so how to add it on the specific component on vue spa?
Haven't tried this myself but as for the css this should work:
<style lang="css" src="path/to/some.css" scoped>
Or
<style lang="scss" src="path/to/some.scss" scoped>
You can add as much css files (style tags) as needed on your vue template... also, if you don't need this css to be scoped (just available in the component, not in children or parent components) just remove the scoped attribute.
And for the JS, you may load it with: require('path/to/some.js');
or if you need to assign it to something in the window object: window.numeral = require('numeral');... that's an example using the numeral library...
I was from angularjs, now picking up react. Even I was using angular 1.x which is already component based, but it still has template. But in react the file structure and the way we use to code front end has changed, like instead of spiting files by pages, u make files by component now. It promotes reusability but does that means how we apply the css also changed?
I saw this import { navBar } from 'styles/navbar.css' in navBar.jsx. Hmm how does css work together with JSX? doest navBar css load that file? What webpack plugin is needed for that? does it come from default? I'm using react-create-app by facebook so I didn't know much about config.
You use css-loader and style-loader to include CSS files in your webpack bundle. By default it generates some JavaScript code that creates a style element with the contents of the imported CSS file and appends it to the head element in your index.html.
So you can definitely use external CSS files to style your React components, just make sure that every CSS class is properly namespaced to avoid naming conflicts with the classes of other components.
For example you could adopt the BEM naming scheme. If your component is called NavBar, then the root element of that component might have a className of x-nav-bar (the x prefix is there to avoid clashing with frameworks like bootstrap), and all child elements, if they need to be styled, will then have class names like x-nav-bar__${childName}.
This kind of import { navBar } from 'styles/navbar.css' is not relevant to JSX but to css-loader. This is a webpack loader that handles css, and it supports cssModules, that allows you to encapsulate selector names in order to avoid css leaks.
So, shortly, that import exposes an object with mapping between your selector to unique string (usually an a hash).
For example:
// styles.css
.foo {
color: red;
}
.bar {
color: green;
}
// Component.jsx
import styles from './styles.css';
console.log(styles);
/* This will print something like
{
foo: '_h234jh',
bar: '_234m23'
}
*/
I recently discovered Vue.js.
I use it with the single file component architecture and I noticed that all my components' styles are all loaded in the page (even those which are not active).
Is there a way to only load current components' CSS, and avoid code repetition?
You can use the scoped attribute to make styles only apply to the current element:
<style scoped>
.class{
//will only apply to this component
}
</style>
Webpack will concat and minify all your sources (even if they are scoped).
CSS across all components extracted into a single file and minified with cssnano.
I don't really see the use case where you'ld need to split your CSS into separate files.