vue引入css(vue引入css不起作用)

讲解了在vue中引入css的相关问题，特别是当引入css不起作用时该如何解决。我们vue中引入css的基本方式，然后分别从六个方面进行了详细的阐述，包括：文件路径、scoped属性、CSS Modules、全局引入、使用第三方库和Vue CLI。我们对全文进行了总结归纳，提出了解决问题的建议。

一、文件路径

在vue中引入css，需要注意的是文件路径的问题。如果路径不正确，会导致css引入不成功。通常，我们可以使用相对路径或路径来引入css文件。相对路径是相对于当前文件的路径，而路径则是相对于项目根目录的路径。如果你的css文件和vue组件在同一目录下，那么你可以使用相对路径来引入css文件。例如：

“`html

@import ‘style.css’;

如果你的css文件在根目录下的css文件夹中，那么你可以使用路径来引入css文件。例如：
```html
    @import '/css/style.css';

二、scoped属性

在vue中，我们可以使用scoped属性来限定css样式的作用范围。这样做的好处是可以避免样式冲突的问题。使用scoped属性后，只有当前组件中的元素才会受到样式的影响。例如：

“`html

这是一个标题

这是一段内容

.container {

background-color: #f5f5f5;

padding: 20px;

}

h1 {

color: #333;

font-size: 24px;

}

p {

color: #666;

font-size: 16px;

}

三、CSS Modules
CSS Modules是一种可以让我们在vue组件中使用局部作用域的css样式的方式。使用CSS Modules可以避免全局作用域的css样式冲突的问题。在使用CSS Modules时，我们需要在style标签中添加module属性，然后在js中使用$style来引用样式。例如：
```html
这是一个标题
这是一段内容
  .container {
    background-color: #f5f5f5;
    padding: 20px;
  }
  .title {
    color: #333;
    font-size: 24px;
  }
  .content {
    color: #666;
    font-size: 16px;
  }

四、全局引入

如果我们想要在整个项目中使用某个css文件，可以使用全局引入的方式。在vue中，我们可以在main.js中引入全局css文件。例如：

“`js

import Vue from ‘vue’;

import App from ‘./App.vue’;

import ‘./assets/css/global.css’;

Vue.config.productionTip = false;

new Vue({

render: h => h(App),

}).$mount(‘#app’);

五、使用第三方库
在vue中使用第三方库的时候，我们需要注意该库是否提供了vue组件。如果提供了vue组件，我们可以直接在组件内引入该库的css文件。如果没有提供vue组件，我们可以在main.js中引入该库的css文件。例如：
```js
import Vue from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app');

六、Vue CLI

Vue CLI是一个官方提供的脚手架工具，可以帮助我们快速创建vue项目。在使用Vue CLI创建的项目中，我们可以使用vue-cli-plugin-style-resources-loader插件来实现全局引入css文件的功能。我们需要安装该插件：

“`bash

npm install vue-cli-plugin-style-resources-loader –save-dev

然后，在vue.config.js中进行配置：
```js
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        '/path/to/your/variables.scss',
        '/path/to/your/mixins.scss',
      ],
    },
  },
};

总结归纳：

在vue中引入css时，我们需要注意文件路径、scoped属性、CSS Modules、全局引入、使用第三方库和Vue CLI等方面的问题。如果遇到引入css不起作用的问题，可以先检查文件路径是否正确，然后再考虑其他问题。如果需要全局引入css文件，可以在main.js中引入；如果需要局部作用域的css样式，可以使用scoped属性或CSS Modules；如果使用了第三方库，需要注意该库是否提供了vue组件；如果使用了Vue CLI，可以使用vue-cli-plugin-style-resources-loader插件来实现全局引入css文件的功能。