组件的 vue.js 自定义 css(没有 webpack 和 vue-loader)
Posted
技术标签:
【中文标题】组件的 vue.js 自定义 css(没有 webpack 和 vue-loader)【英文标题】:vue.js custom css for a component (Without webpack and 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 文件, 【参考方案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)构建步骤。
(声明:作者在此)
【讨论】:
以上是关于组件的 vue.js 自定义 css(没有 webpack 和 vue-loader)的主要内容,如果未能解决你的问题,请参考以下文章