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.
Related
i am working on a vue project,
on a route for example /app there are components that not using scss.
and on another route for example /admin there are components that using scss.
when i import /app route and its childs in project it creates errors like this:
font-size: $font-size-base;
^
Undefined variable: "$font-size-base".
when i remove /app and its child routes from router file errors will solve and works fine.
i imported scss in /admin parent component to only use scss in this route but it didnt solve the error.
any idea?
Webpack needs to process SCSS when your project runs. You're seeing this on routes because things aren't rendered in Vue until they're called by either a route or a parent component.
Vue can use regular CSS and SASS together. You have to set it up to process the files though.
I'm assuming that you have CSS or SCSS in each template file
<template> ... </template>
<script> ... </script>
<style> CSS or SCSS rules </style>
In that case you need to tell Vue to preprocess the stuff inside the style tags. Do that with the lang attribute in the template where you have SCSS.
<style lang="SCSS"> ... </style>
You also need to include the node-sass and sass-loader packages.
Note: You need to define the SCSS variable $font-size-base in the component that uses it since by default each template is self-contained.
i was using require to address an image file in one of my components. that was the problem.
I would like to create a npm repo containing a folder with Vue single file components from which I can import then easily:
import { Button } from "#user/design-system"
the problem I have is that the Button.vue contains variables coming from a global .scss file that is handled by Webpack.
How can I bake the variables into each component when I build for the npm release?
So essentially I want a dev environment which I run by npm run serve and I want a npm run build which copies all components and bakes the CSS variables into it to have stand-alone components.
You should have this variables in a dedicated file (for example _variables.scss), in your project where you want to import your component. Then you should make this variables accessible to all the components. I suggest you to use style-resouces-loader, that will import your variable in every component. Vue ClI wrapper - vue-cli-plugin-style-resources-loader.
To export your UI library with already inlined CSS, you should build your UI library through vue-cli-service build. And then you can import your builded component with builded CSS styles, which was built from SCSS.
I am building a webcomponent package using Vue CLI 3 and single file components. We have a shared package our-awesome-shared-controls that contain basic site components such as a collapsible container.
Inside my component, I import and reference the collapsible container and wrap my content in it. When I build as an app the styles from the imported components are included and everything looks great, however; when I target wc (WebComponent) using the vue-cli the style for the imported component (collapsible container) are not included.
Is there a way for me to tell the vue cli that it should include those styles? If not would there be a way to import those styles? The imported components have their style set to scoped so I'm not sure if that makes a difference.
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
How can a .vue file (as a parent component with child .vue files) be published to npm so that you can install, require, and use it as a component with browserify as
let component = require('published-vue-component');
I only use browserify; I don't use webpack at all. I thus bundle all .vue files into a single build.js using a vueify transform. All of the information I see currently about this either a.) reads that you should export your main .vue file (doesn't work) or b.) involves webpack.
If you go ahead and bundle the component with a vueify transform and set "main": "the/bundle/path/index.js", it seems that a vueify transform can't work without a template rendering function and thus isn't intended for single components.
If you simply export the parent .vue file, when you require the component you're going to get a syntax error from the first character of the <template> tag.
If you bundle your component as a umd module, then you can import it into browserify or webpack. Use rollup and this plugin: http://vuejs.github.io/rollup-plugin-vue/
I ran into this issue with my vue-autosuggest library, where browserify users were experiencing issues importing my module.
Check out this example rollup config for inspiration:
https://github.com/Educents/vue-autosuggest/blob/master/build/rollup.umd.config.js
Hope this helps!