在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

我在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中。

Answer 2

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';

在styles.css中，您可以：

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

4. Restart your dev server -- npm run serve