Question

我在这篇文章Clarity Design System-Get Started上做了一切，但我无法使其发挥作用。我在一个新的离子proyect上安装了Clarity UI，但当我尝试添加一个简单的Card示例或其他任何东西时：

  <div class="row">
<div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
    <div class="card">
        <div class="card-header">
            Header
        </div>
        <div class="card-block">
            <div class="card-title">
                Block
            </div>
            <div class="card-text">
                ...
            </div>
        </div>
        <div class="card-footer">
            <button class="btn btn-sm btn-link">Footer Action 1</button>
            <button class="btn btn-sm btn-link">Footer Action 2</button>
        </div>
    </div>
</div>

CSS没有用。这就是它的外观2

我错过了什么？ CSS和JS文件无法被这样的引用引用：

<link rel="stylesheet" href="path/to/node_modules/clarity-ui/clarity-ui.min.css">

我是 Ionic2 + Angular 的新手，我是Clarity的新手

Answer 1

再次感谢菲利普！我读了这篇文章后终于找到了这个文件 {{ROOT}} \ node_modules \ @ionic \ app-scripts \ config \ copy.config.js ，我添加了这个文件：

copyClarityIcons: {
    src: ['{{ROOT}}/node_modules/clarity-icons/clarity-icons.min.css'],
    dest: '{{WWW}}/assets/css'
},
copyClarityElements: {
    src: ['{{ROOT}}/node_modules/@webcomponents/custom-elements/custom-elements.min.js','{{ROOT}}/node_modules/clarity-icons/clarity-icons.min.js'],
    dest: '{{WWW}}/assets/js'
},
copyClarityCSS: {
    src: ['{{ROOT}}/node_modules/clarity-ui/clarity-ui.min.css'],
    dest: '{{WWW}}/assets/css'
}

它有效!!

清晰度设计系统CSS不起作用

1 个答案: