How to import internal css with javascript vuejs?

import external css in vue js
import css file in vue component
vue' import css from cdn
vue import css from node_modules
vue css-loader
vue import scss
laravel vue import css
vue css variables

Currently, I have to import css file conditionally depend on which kind of browser users are using. To not making css file global, I have the following code:

  created() {
      this.checkIsMobile()
  },
  methods: {
      checkIsMobile(){
        var isMobile = new MobileDetect(window.navigator.userAgent);
        if (isMobile.mobile()){
          $('head').append('<link rel="stylesheet" type="text/css" href="@/assets/css/main-pc.css">');
        }else {
          $('head').append('<link rel="stylesheet" type="text/css" href="@/assets/css/main-m.css">'); //must be load external css
        }
      },

It does not work because it's internal css.

I can not import in style tag because there are some link to other images in my css. Importing in style will lead to relative modules were not found

How should I do with without uploading css file to somewhere?

Edit: This question is theoretically the same as what I just did (without jQuery)

Can you try the following method?

<style scoped>
@import './../file.css';
</style>

Source URL: https://forum.vuejs.org/t/how-to-import-css-files-into-single-file-component/41337

Working with CSS, If you did not do so, the internal webpack config is still pre-configured to handle all of them. You just vue.config.js const path = require('path') module.exports To import CSS or other pre-processor files as CSS Modules in� Include CSS file in one component. If you want to include the external CSS file in only one component you can import it in the <style></style> tag.. For example, we want to include Bootstrap 4 CSS file in a single component.

You shouldn't use JQuery. It is slow, big size and everything that you using jquery you can do in Vue.

Second, you shouldn't detect screen size in JS, but in CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

vue import css Code Example, “vue import css” Code Answer. // To import global CSS, simply import the stylesheet in main.js or App.vue, // where it is easy to reference all global styles in one main file. // (or create a styles-import. // main.js. import '~/assets/styles.css'; Because CSS-in-JS is a fairly #hotdrama topic, I realized that there are a lot of different ways that folks are trying to go about this. Now, I share the feelings of many other people who hold CSS in high regard, especially when it comes to leveraging JavaScript to write CSS. My initial reactions to this approach were fairly negative.

Vuejs compiles in a different way, so import or adding internal css file to head does not work. Simply use require:

    if (isMobile.mobile()){
      require('@/assets/css/mobile.css');
    }else {
      require('@/assets/css/pc.css');
    }

How the hell can i include a css file? � Issue #604 � vuejs-templates , I did it like this: main.js: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in� How do I import CSS files into vue components so that the scope of those files limited to components only, I tried importing the files into style tab in a single component file with the scoped property but it still bundles all the CSS and overriding one another? Is there any way I can import CSS files with scoped limited to Single file component?

Injecting CSS imported from JavaScript in a .vue file as critical CSS , CSS directly imported from JS won't be injected as critical CSS on server inject this kind of styles into HTML as it does for embedded styles? Import a local JavaScript file. In the case that you would like to import a local JavaScript in your Vue component, you can import it this way: MyComponent.vue <script> import * as mykey from '../assets/js/mykey.js' export default { data() { return { message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js! } } } </script>

Styling Vue components with CSS, Vue components are written as a combination of JavaScript objects that manage Next, in your src/main.js file, import the reset.css file like so: center; } [class*=" __lg"] { display: inline-block; width: 100%; font-size: 1.9rem; }� fwiw, here's what worked for me after npm install normalize.css. within main.js: import 'normalize.css'; OR within App.vue: <style> @import '~normalize.css'; The ~ was required in the <style usage. 👍

Styling Vue.js components using CSS, Note: this tutorial uses Vue.js Single File Components. The simplest option to add CSS to a Vue.js component is to use the style tag, just like in� Lodash, Moment, Axios, Async…these are useful Javascript libraries to utilise in your Vue.js apps. In this article we look at a method for including libraries that is DRY, avoids globals and makes them consistently available across your all your components and module files.

Comments
  • Why is there jQuery in your VueJS app? For your VueJS app, are you using a bundler like webpack? If you are, this might help: stackoverflow.com/a/52769714/395910
  • Why not just statically include a single CSS file and use media queries to override different rules for smaller screen sizes?
  • Does this answer your question? How to load css file dynamically
  • I can't use this with condition
  • I used this library github.com/hgoebl/mobile-detect.js to detect screen size, seems reliable. Detecting mobile using CSS might be the answer, but it break my work flow