How may we reference baseUrl in the <style> section of a vue.js SFC?
/src/views/Home.vue
<style scoped>
#import url(<%= BASE_URL %>static/required_styles.css); // does not work
</style>
Directory structure:
|--public
| --static
| --required_styles.css
|--src
| --views
| --Home.vue
It's not clear how to do this from the docs on static asset handling:
https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder
The public folder is for files that you want to be served directly on the server without going through webpack. An example would be minified css who's styles you use. In that case you would just add the css path to vue.config.js or the header of index.html. If you are importing in the styles tag the css will be pull through your build process (e.g. webpack) when the component is compiled. This means you should not put the .css file in the public folder, and should use a relative path for the import.
Related
I wanna hide that i use The Blazor.
so, I should modify name of bundled css and js files.
How to do this?
According to this article, CSS isolation occurs at build time. During this process, Blazor rewrites CSS selectors to match markup rendered by the component. These rewritten CSS styles are bundled and produced as a static asset at {PROJECT NAME}.styles.css, where the placeholder {PROJECT NAME} is the referenced package or product name.
That means we could only disable the bundle not modify it during develop environment.
But after publish, it will generate the file like this:
You could modify the {PROJECT NAME}.styles.css to {other}.styles.css and modify the index.html css name as below:
<link href="{other}.styles.css" rel="stylesheet" />
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 have created a Vue project with Typescript having components in class style. I need to include some external CSS file - like from Amazon S3. The CSS doesn't seems to be loaded.
In the network section I can see it.
I suggest you to use preprocessor
Install SASS -
npm install -D sass-loader sass
then You will be able to import it in your App.vue
<style lang="scss">
#import './static/css/style.css';
</style>
Update
I figured out one more way to include single css file.
In your App.vue, you can add css file to style src
<style src="relative-path/style.css"></style>
you can load external URL
<style lang="scss or less">
#import "https://external_url_.css";
#import ".../assest/_.css";
</style>
you can load css loaders installed if you more such as sass-loader, css-loader , less-loader npm
I'm trying to include a cdn external css file in my vue-cli-3 project, so I added the css file in the public/index.html file like this:
<link rel="stylesheet" href="http://mycssfile.css">
But the css is not included in the generated index.html file. this used to work in vuejs2, I don't understand why it doesn't work with vuejs3. Any idea what the problem is? thanks
It is simple.
On your main.vue add the following
<style>
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";
</style>
I'm making use of the resolve-url-loader which is working great for importing third party stylesheets that are in turn linking to their own assets.
However, i'm struggling to understand how in the instance below my reference to owl.jpg from app.scss manages to successfully resolve?
Folder structure:
src/
|
|- index.html
|
|-img/
| owl.jpg
|
|- scss/
| app.scss
|
|-js/
| app.js
app.scss
These incorrect paths to the asset still seem to resolve?
.owl {
background: url('owl.jpg');
}
.owl {
background: url('/owl.jpg');
}
.owl {
background: url('img/owl.jpg');
}
Surely the path should only resolve with the below path?
.owl {
background: url('../img/owl.jpg');
}
Am i missing something? Is the resolve-url-loader clever enough to resolve incorrect paths??
You have to compile your scss file to css, browser works only with .css files. Then choose the output folder, i guess it can be src/css, and then enter a correct path in your css depending on images folder.
If webpack compiles scss files without errors, it just could be incorrect url to image. If correct, background-size property should be added with 100% 100% parameters.
.owl {
background-image: (path/to/image.img);
background-size: 100% 100%;
}