组件的 vue.js 自定义 css（没有 webpack 和 vue-loader）答案

【问题标题】：vue.js custom css for a component (Without webpack and vue-loader)组件的 vue.js 自定义 css（没有 webpack 和 vue-loader）
【发布时间】：2019-09-10 18:55:09
【问题描述】：

使用 Vue Router 加载组件。

请注意，我没有使用 webpack 或 vue-loader。

这是一个由 vue - router 加载的示例组件

export default {
    name: 'Abc',
    template:'<div>Now .. i can't add style element here :(. So where should i add it </div>',
    data(){
        return {
             message:' new message'
        }
    },
}

我在哪里可以添加 css 样式。如果不可能，我不关心 css 范围。

不想使用渲染函数 (https://vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth) .. 因为创建 dom 结构会害死我

【问题讨论】：

如果没有 webpack，你不能像 Vue docs 中提到的那样模块化 CSS。那里的大多数 vue 组件都提供了一个 CSS 文件以包含在这种情况下的 head 标签中。因此，您在模板代码中有两个选择，一个单独的 CSS 文件或 inline-css。
是的 .. 现在我已经使用了 head css 文件，

标签： vue.js vuejs2 vue-router

【解决方案1】：

As is stated in this answer, you can't define separate CSS in a Vue component using something like css like you can define HTML using template.

话虽如此，有几种方法可以为特定组件/元素定义 CSS：

作用域 CSS

您可以将style 定义为一个组件：

App.vue

<template>
  <div id="app">
    <RedComponent/>
    <NotRedComponent/>
  </div>
</template>

<script>
import RedComponent from "./components/RedComponent";
import NotRedComponent from "./components/NotRedComponent";

export default {
  components: {
    RedComponent,
    NotRedComponent
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

RedComponent.vue

<script>
export default {
  template: "<div>I am red</div>"
};
</script>

<style scoped>
div {
  color: red;
}
</style>

NotRedComponent.vue

<script>
export default {
  template: "<div>I am not red</div>"
};
</script>

See this live here

CSS 类和 ID

您可以给元素类和 ID 以便使用 CSS 选择它们，并且只需要一个单独的 CSS 文件。注意：这不是 Vue 独有的。

App.vue

<script>
export default {
  name: "App",
  template: '<div><p class="red">I am red</p><p>I am not red</p></div>'
};
</script>

index.css

.red {
  color: red;
}

See this live here

您可以从任何地方（在合理范围内）引用此 index.css 文件 - 例如，在我的现场演示中，它是从 index.html 本身内引用的（类似于 <head> 标记中的 <link rel="stylesheet" type="text/css" href="index.css" /> 即可）。

内联样式

为此，使用反引号 (`) 而不是引号将使您的生活更轻松。使用反引号的另一个好处是您可以将模板跨越多行。

App.vue

<script>
export default {
  name: "App",
  template: `<div>
    <p style="color: red">I am red</p>
    <p>I am not red</p>
  </div>`
};
</script>

See this live here

就我个人而言，我从来没有发现一个使用范围 CSS 无法解决问题的用例，即使使用 vue-router 也是如此，但如果您出于任何原因无法使用它，这些是一些替代选项。

【讨论】：

对于 RedComponent.vue：返回类型是什么：application/javascript 或 text/html
你确定没有 webpack
我认为scoped 实际上确实使用了 webpack，因为 Vue 需要向各个元素添加特定的数据标签，以便在编译时正确地确定它们的范围......其他两个选项应该可以正常工作虽然是 webpack。
我不明白你关于返回类型的问题 - RedComponent.vue 是一个 Vue 组件，只是保存在不同的文件中。
是的 .. RedComponent.vue 的不同文件 .. 我尝试了 application/javascript 和 text/html MIME，都无法在脚本中导入 .. 就像 import {z} from 'a /b';

【解决方案2】：

您可以使用任何 CSS 库，如 Bootstrap、Bulma 等，并直接在模板中添加 css 类，如下所示。

在页面的head 部分添加引导参考链接，仅此而已。

template: `<div class="container">Boostrap</div>`

【讨论】：

无法添加到页面头部以减少页面加载时间
当然，不建议包含在head部分。我在讲述它是如何工作的。

【解决方案3】：

如果你需要在没有 webpack (vue-loader) 的情况下使用 .vue 文件，你可以看看 vue3-sfc-loader。

vue3-sfc-loader
在运行时从您的 html/js 动态加载 .vue 文件。没有 node.js 环境，不需要（webpack）构建步骤。

_{（声明：作者在此）}

【讨论】：