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

Question

在 Vue.js 应用程序中添加外部 CSS 文件的正确方法是什么？

我找到了几种在 Vue.js 应用程序中添加 CSS 文件的方法。

有人建议使用这个。 <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>

使用所有这些方法的优点和缺点是什么？

我想以一种方式使用，使所有 CSS 文件在部署时成为一个文件。这样我的应用程序加载速度更快。

Answer 1

1. 安装 sass

npm install sass-loader --save-dev

1. 在您的src/assets 目录下创建新的css 目录

2. 在新的css 目录中创建一个styles.scss 文件

3. 将以下代码行添加到您的 main.js 文件中

import '../src/assets/css/styles.scss';

在styles.scss文件中可以导入多个css文件。

@import '~bootstrap/scss/bootstrap.min.css';
@import './common.css';

你也可以像这样在同一个文件中编写常规的 CSS 属性

body {
  background: gray;
}

div {
  font-weight: bold;
}

5. 重启你的开发服务器

npm run serve

Answer 2

在 Vue.js 中对我（！）来说最好的方法是在我的主 index.html 中包含全局页面样式和链接标记。通过这种方式，它们可以从任何地方访问，并在首次打开页面时加载。 像这样： index.html：

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

我的组件的样式规则内联在 .vue 文件中，使用：mycomponent.vue:

<style scoped>
...
</style>

编辑：

如果您不想使用 .vue 文件并使用 .js 文件，则不能将 css 限定在组件内。如果是这种情况，我总是将它们命名为与组件相同的名称，并将其包含在 index.html 中的链接标记中。