Question

如果我将实现的css链接放在@ ionic / vue源代码的index.html的头部，是否可以在vue和ionic组件内部/之上使用这些css类样式？它将覆盖Ionic组件的默认样式吗？

Answer 1

否，添加物化不会覆盖离子成分。材料成分需要预先定义。

https://github.com/zachfitz/Ionic-Material

Answer 2

我在Vue / Ionic中成功实现了Materialize，其他答案仍然是正确的，因为我没有考虑过Ionic组件与使用常规html（div）组件之间的差异，并且仍未在html组件上使用Vue和Ionic函数用Materialize类标记的。

我只是在项目的根目录中设置了一个sass文件夹，并设置了预处理程序以将输出保存到/src/assets/文件夹中。然后我将导入添加到main.js：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
import './assets/materialize.min.css';
import './assets/materialize.min.js';

然后我在/public/index.html文件中添加了html导入：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="<%= BASE_URL %>materialize.min.css" rel="stylesheet">
  <title>CIWI</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but CIWI doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="<%= BASE_URL %>materialize.min.js"></script>
</body>

</html>

现在，当我创建组件时，可以通过添加materialize类来选择使用物化组件和主题，而不是Ionic。

在Ionic / Vue中实现CSS /组件在Ionic中互换使用？

2 个答案: