Question

我需要在哪些Slate目录中复制Materialize文件？我设法使用

创建了一个Materialized布局

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

然后我将Materialise / sass文件夹的内容复制到slates / global目录，添加了行

<!--Import materialize.css-->
{{ 'materialize.scss' | asset_url | stylesheet_tag }}

进入我的theme.liquid并运行slate构建，部署和观察。无法看到上传到我的主题文件的Materialise文件。我做错了什么？

Answer 1

复制了目录sass / files中的SCSS文件，以生成src / styles / vendor目录

将以下代码添加到src / styles / theme.scss

        /*================ MODULES ================*/
        @import url('modules/site-header.scss');
        @import url('modules/gift-card-template.scss');

        /*================ Materialize  ===========*/
        @import url('vendor/materialize/materialize.scss');
        // Mixins
        // @import url('vendor/materialize/components/prefixer');
        @import url('vendor/materialize/components/_mixins.scss');
        @import url('vendor/materialize/components/_color.scss');

        // Variables;
        @import url('vendor/materialize/components/_variables.scss');

        // Reset
        @import url('vendor/materialize/components/_normalize.scss');

        // components
        @import url('vendor/materialize/components/_global.scss');
        @import url('vendor/materialize/components/_badges.scss');
        @import url('vendor/materialize/components/_icons-material-design.scss');
        @import url('vendor/materialize/components/_grid.scss');
        @import url('vendor/materialize/components/_navbar.scss');
        @import url('vendor/materialize/components/_roboto.scss');
        @import url('vendor/materialize/components/_typography.scss');
        @import url('vendor/materialize/components/_transitions.scss');
        @import url('vendor/materialize/components/_cards.scss');
        @import url('vendor/materialize/components/_toast.scss');
        @import url('vendor/materialize/components/_tabs.scss');
        @import url('vendor/materialize/components/_tooltip.scss');
        @import url('vendor/materialize/components/_buttons.scss');
        @import url('vendor/materialize/components/_dropdown.scss');
        @import url('vendor/materialize/components/_waves.scss');
        @import url('vendor/materialize/components/_modal.scss');
        @import url('vendor/materialize/components/_collapsible.scss');
        @import url('vendor/materialize/components/_chips.scss');
        @import url('vendor/materialize/components/_materialbox.scss');
        @import url('vendor/materialize/components/forms/_forms.scss');
        @import url('vendor/materialize/components/forms/_input-fields.scss');
        @import url('vendor/materialize/components/forms/_radio-buttons.scss');
        @import url('vendor/materialize/components/forms/_checkboxes.scss');
        @import url('vendor/materialize/components/forms/_switches.scss');
        @import url('vendor/materialize/components/forms/_select.scss');
        @import url('vendor/materialize/components/forms/_file-input.scss');
        @import url('vendor/materialize/components/forms/_range.scss');
        @import url('vendor/materialize/components/_table_of_contents.scss');
        @import url('vendor/materialize/components/_sideNav.scss');
        @import url('vendor/materialize/components/_preloader.scss');
        @import url('vendor/materialize/components/_slider.scss');
        @import url('vendor/materialize/components/_carousel.scss');
        @import url('vendor/materialize/components/_tapTarget.scss');
        @import url('vendor/materialize/components/_pulse.scss');
        @import url('vendor/materialize/components/date_picker/_default.scss');
        @import url('vendor/materialize/components/date_picker/_default.date.scss');
        @import url('vendor/materialize/components/date_picker/_default.time.scss');

这允许

$ slate build

正常运行并从所有SCSS组件中创建theme.scss文件。所以theme.scss似乎被连接并正确上传。不幸的是，似乎有一个整体的Shopify问题，在the slate github repo

Answer 2

我在看你的问题。你有没有按预期工作？我一直在尝试将引导网格添加到我的平板

添加了bootstrap文件：vendor / bootstrap / _grid.scss（例如，有一堆文件）
引用src / styles / theme.scss中的bootstrap资产，如下所示：

/ ================ UTILS ================ / @import url（＆＃39; tools / mixins.scss＆＃39;）;

/ ================设置================ / @import url（＆＃39; settings / variables.scss.liquid＆＃39;）;

/ ================ COMMON ================ / @import url（＆＃39; global / normalize.scss＆＃39;）; @import url（＆＃39; global / slate-reset.scss＆＃39;）; @import url（＆＃39; global / helper-classes.scss＆＃39;）; // @ import url（＆＃39; global / grid-bootstrap.scss＆＃39;）; @import url（＆＃39; global / layout.scss＆＃39;）; @import url（＆＃39; global / icons.scss＆＃39;）; @import url（＆＃39; global / rte.scss＆＃39;）; @import url（＆＃39; global / responsive-tables.scss＆＃39;）; @import url（＆＃39; global / links-buttons.scss＆＃39;）; @import url（＆＃39; global / forms.scss＆＃39;）; @import url（＆＃39; global / blank-states.scss＆＃39;）;

/ ================ BOOTSTRAP ================ / @import url（＆＃39; vendor / bootstrap / _grid.scss＆＃39;）;

/ ================ MODULES ================ / @import url（＆＃39; modules / site-header.scss＆＃39;）; @import url（＆＃39; modules / gift-card-template.scss＆＃39;）;

虽然My code editor

在平板主题中使用了哪个任务管理器。我想我可以通过调整任务来生成一个新的样式表并按照这样做：

//引导网格 {{＆＃39; grid.scss.css＆＃39; | asset_url | stylesheet_tag}}

将Shopify的主题开发框架Slate与CSS Framework Materialize相结合

2 个答案: