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.
2 Answers
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
2 Comments
Krishna
I have installed
"css-loader": "^3.2.0", Do I need to configure anywhere.
channasmcs
not need just tr. if you plan to use less or scss (preprocessor) you can move with preprocessor loader. that's your preference.
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>
7 Comments
Krishna
Why I need to use scss here. It's CSS file only ryt
Satyam Pathak
Correct, but
dynamic imports requires scss. This way you can even control individual css imports to single component too. There is JS way too using webpack but I recommend SASS here neat and helpful. In future you probably want to use scsschannasmcs
that's optional
Krishna
Didn't work for me after installing sass
<style lang="scss"> @import url('<some_url>'); </style>Krishna
Yes I installed sass. I placed the above line in App.vue
|
vue-clior ?<link rel="stylesheet" href="">in index.html Updated my question