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...
Related
I decided to convert a landing page to an AngularJS website, because I needed to add an admin section. To separate the website section from the admin section, I created two modules: website and admin.
The original website has been made with Bootstrap 3, and has a style.css that is custom CSS for all the Bootstrap and the website in general.
On the Angular version, I can load the website properly after I installed Bootstrap 3, and in the root-level style.css I do the following :
#import './app/website/assets/css/style.css';
The issue is that I don't want this CSS to be loaded for the full website (website + admin). With this configuration, the admin section is also affected by the CSS.
The import only works if it is in style.css. If I move the import to the website module in the root component.css styles won't load at all.
I know it must have something to do something with style scoping and ng-deep.
EDIT: The only way I can have the website load properly with the CSS imports within its own module is :
encapsulation: ViewEncapsulation.None
As of right now, there is no way to import css at the module level. Global styles are applied globally, and the default ViewEncapsulation makes it so that component specific styles don't bleed out to the rest of the app.
If I move the import to the website module in the root component.css
styles won't load at all.
Importing that css at the modules root component only applies the styles to that one component. I also wouldnt look too hard at ng-deep as it is / will be deprecated https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Without knowing how many components are in WebsiteModule or what styles.css looks like, I'll present two options.
1) Rename styles.css (could get confusing since it's not going to be global anymore), import it in each of the components in WebsiteModule.
If that turns out to be too tedious (one bazillion components in WebsiteModule), then
2) I would take a good hard look at the styles.css in question, and see what styles should be applied globally.
Turning off ViewEncapsulation should be a last resort IMO.
I am using react-table to create a filterable table, however I wanted to style it the way I want. Should I change it directly inside node_modules application or should I create my own CSS file and override inspecting the element on the fly?
For React-Table v6, you can basically do it in 2 ways if you want to use css files.
Start with the css file from the npm package and override pieces you want to change
Start with your own css file and style everything that needs to be styled
Ad 1:
import "react-table/react-table.css"
import "./your_own_styles.(s)css"
Ad 2:
import "./your_own_styles.(s)css"
To get an idea what you can use in your own css file you can have a look at this gist: https://gist.github.com/sghall/380aa1055bcad4db22d1fc258d7f09d0
Or start by copying the react-table/react-table.css from the react-table npm package (in your node_modules).
Definitely do not change the node_modules. You can either style inline or attach styles.
https://reactjs.org/docs/faq-styling.html
Definitely override the CSS classes with your own file. That's common practice for styling components from libraries.
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.
TLDR: Does anyone know of an elegant way to make sure a component injects its own <style>{...everything in ./dist/vue-COMPONENT_NAME.css}</style> element into the page, but only once? SSR friendly too?
I've been on the hunt for a good solution to this for over 2 days now; I'm building a Vue component that is likely to be used by mostly non-built, client side environments, included in the page via script tag:
<script src="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.js"></script>
And, normally you would just use a link tag to get the styles in there:
<link rel="stylesheet" href="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.css">
..but I would like remove the requirement to add the additional (possibly forgotten) link tag to the page. I would like for this component to be able to automatically inject its required styles into the page, so it is never displayed in an un-styled state.
This is a graphics focused component using a Canvas for display, and some of its internal logic is built on analyzing the clientBoundingRect of the top level DOM node - So having the styles that set its size and proportions at mount is imperative.
I am also planing on using this component myself via Nuxt, so I'm going to have to make sure that whatever solution I come to avoids the dreaded "The client-side rendered virtual DOM tree is not matching server-rendered content." error message.
So far, I have been loving how low-configuration the build with vue-cli has been:
vue build vue-COMPONENT_NAME.vue --prod --lib VueCOMPONENT
...but its output is always the two files:
./dist/vue-COMPONENT_NAME.js
./dist/vue-COMPONENT_NAME.css
Is there an argument or configuration prameter for vue-cli that would cause it to build the styles into ./dist/vue-COMPONENT_NAME.js? Has anyone done anything like this with vue-cli?
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.