代码之家 › 专栏 › 技术社区 › abu abu

在Vue.js应用程序中添加CSS文件的正确方法

vue.js css javascript

abu abu · 技术社区 · 6 年前

有人建议用这个。 <link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">

有人建议这个

<style lang="scss">
@import 'src/assets/css/mycss_lib.css';
</style>

require('./assets/layout3/css/layout.min.css')

有人建议使用下面的代码 webpack.config.js

{
    test: /\.(css|less)$/,
    use: [{
         loader: "style-loader" // creates style nodes from JS strings
    }, {
         loader: "css-loader" // translates CSS into CommonJS
    }, {
         loader: "less-loader" // compiles Less to CSS
    }]
  }

有人建议用这个

<style src="../node_modules/vue-multiselect/dist/vue-multiselect.min.css"></style>

2 回复 | 直到 5 年前

informant09 6 年前

对我来说最好的方法!!)在Vue.js中,将在我的主index.html中包含带有链接标记的全局页面样式。这样就可以从任何地方访问它们,并在第一次打开页面时加载它们。

<link rel="stylesheet" type="text/css" href="/static/bootstrap.min.css">

mycomponent.vue:

<style scoped>
...
</style>

如果不想使用.vue文件并使用.js文件,则不能在组件内部限定CSS范围。如果是这样的话,我总是将它们命名为与组件相同的名称,并将其包含在link标记的index.html中。

Hardik Raval 5 年前

1. install npm install sass-loader --save-dev
2. create new 'css' directory in src/assets/css/styles.scss
3. In main.js -- import '../src/assets/css/styles.scss';

@import '~bootstrap/scss/bootstrap.scss';
body{ ... } div { ... }

4. Restart your dev server -- npm run serve

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前