[英]Proper way of adding CSS file in Vue.js Application
在 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 文件在部署时成为一个文件。 这样我的应用程序加载速度更快。
npm install sass-loader --save-dev
在src/assets
目录下创建新的css
目录
在新的css
目录下创建一个styles.scss
文件
将以下代码行添加到您的main.js
文件中
import '../src/assets/css/styles.css';
在styles.scss
文件中,您可以导入多个css 文件。
@import '~bootstrap/scss/bootstrap.min.css';
@import './common.css';
您还可以在同一个文件中编写像这样的常规 CSS 属性
body {
background: gray;
}
div {
font-weight: bold;
}
npm run serve
在 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 中的链接标签中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.