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.
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 want to create a npm module for other projects shared at our repository. My "library" contains some vue.js basic components and some SCSS. I want to reuse this basic scss and the components.
I do use the same SCSS in my components too. Following an example excerpt from a library component:
<style scoped lang="scss">
#import "./src/assets/css/variables.scss";
....
</style>
Now I want to reuse this component inside my main project but the sass loader fails by referencing this variables.scss (inside my library module). Well this path obviously can't work. I should do something like "../assets/css/variables.scss" to work both in library build as in project build... what has some caveats too when I use nested folders.
I'm wondering to find so little information about it in the internet. Could some one give me an advice of "how to do it right"?
Thanks in advance!
If I understand you correctly, you want to import your variables sass file to your "sub project".
In that case, when you have built your npm "library" package, you can reference it by package name in the sub project you install it to:
<style scoped lang="scss">
#import "library-name/assets/css/variables.scss";
....
</style>
Any way to change the default lang attr for Vue single file components loaded with Webpack?
I'm referring to
<script lang='coffee'>
<template lang='pug'>
<style lang='stylus'>
That's my preferred list of loaders (lang / languages), and I mostly use the same ones.
How to setup this in Webpack so that <template> would mean pug instead of html, which would then need <template lang='html'>?
Thanks
If developing with VS Code and the Vetur plugin, it has customizable snippets you can use to achieve your preferred starting point. This doesn't have anything to do with Webpack per se, I'm not sure how Webpack is coming into play for you in this case.
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
I'm working on a vue.js app. It runs fine in DEV mode, but fails to include / parse my scss while Building (npm run build). I'm using the the Vue PWA template (https://github.com/vuejs-templates/pwa)
My scss is included in the App.vue file like so:
<style lang="scss" src="./styles/app.scss">
I've haven't changed anything in the build/config files.
Should i add my app.scss file as a seperate entry point, I'm quite lost here..|
Thank in advance
Assuming that your node-sass and sass-loader is already setup correctly.
You can use the following way to import your sass file
<style lang="scss">
#import "./path/to/scss"
</style>