Is there a config option in Vue to make a separate CSS file?
I tried using the webpack plugin to extract CSS. However, Vue still loads the same styles inline.
Is there something I’m missing about Vue? Or is this purely my misunderstanding of webpack?
webpack.config.js
Related
I am using an vue-cli-service to build a web component. All styles referenced in this component are always inlined into the javascript file.
vue-cli-service build --target wc --name component-name --inline-vue ./src/components/someComponent.vue
Is there a way to force Vue to pull out component CSS into a separate file instead of inlining it into the dist/component-name.js file?
Alternatively, is there an easy way to allow external users to override the Shadow DOM styles?
Unfortunately I don't believe there's an automated way to do this without writing a custom webpack plugin. You're going to have to migrate the CSS manually.
If you're using webpack, you can take all your component CSS and move it into a separate file.
From there, you can include it in your main.js file using either a require or an import:
import './css/styles.css';
If you're not using webpack or you want to include CSS files only in specific components then you can import the file within the component itself.
Simply create a <style> block and import the CSS within it:
<style>
#import './css/styles.css';
</style>
You could use this <style> block approach globally too by adding it to your App.vue file.
I am looking at the example files of vuetify. They all seem to be *.vue files. I am only familiar with *.html *.css *.js files where vue is used with CDN. How to convert/modify these vue files for CDN use? what are the steps? What are the pitfalls in doing so?
I am a beginner in vue.js and currently prototyping a tiny application to input/output few data and nothing fancy is required. CDN fits well for that.
So at first I would always recommend going with the Vue CLI instead of the CDN usage because it brings you a lot of benefits and a overall smoother developer expierence.
Coming to your question: Here is the starter template for Vuetify with a CDN https://codepen.io/pen?template=OJJeVge
They simply use the vuetify components inside a <script> tag with an id and mount that and initialize the vue instance with it.
You would put all other data stuff inside the <script> tag like you would do inside the script tag of a normal .vue file.
I want to configure prettier in my nativescript vue project. I use tslint + prettier + tslint-config-prettier plugin, created some basic configuration, setup file watchers etc. The problem is, that prettier modifies the cases of my CSS selectors in *.vue files e.g Label => label, which destroys styling of the whole app.
How can I prevent it? Css is a part of *.vue file, therefore I can't simply ignore *.scss files.
I need to import sass partials in Vue single file components. Since Sass imports may cause duplicate output, I'm importing via webpack in the script block. Everything works great, but I find it problematic from a maintenance standpoint that my sass partials are so far from the rest of my styles in code. This is mainly a question of style and organization.
My question is related to webpack. Let's say I'm using webpack and vue.js project. How does webpack build the project when I run the npm run build. I know that there's a build folder where config files have to be added and there'll be output folder dist which will save my final project.
Question 1) WHat does webpack do? Does it search entry point in config file so that it knows where to start building process from? for vue.js it's src/main.js. AM I right?
QUestion 2) when it finds main.js, what does it do? does it go from main.js to top so that to find all the dependencies ?
QUestion 3) Let's say IT found a .vue file. what does it do? does it seperate js code - put it into some other js file, then seperate css and put it into some other css file? or just take the whole .vue code and puts it into js file(with all its html and so on)?
QUestion 4) Just need that line of code what it looks to show me QUestion 3) answer.
Yes, webpack has an entry point (entry section from config). It's not src/main.js exactly, it's configurable.
It builds a dependency tree starting from an entry point.
It will be handled with loaders in the sequence you provided. Usually, it's vue-loader which transforms vue files to js, next it goes to babel-loader which transpiles your js dialect (Flow/ES6/ES2017/TS) to ES5, next ot js-loader which can finally split all the code to dependencies and continue loading.
CSS separation can be done with webpack plugins like ExtractTextWebpackPlugin and then your css dialect (LESS/SASS/PostCSS, etc) will be transformed with loaders, i.e. sass-loader, css-loader, style-loader.
When styles extraction plugin is not present, it will distribute css along with js and put it to the head styles.