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

【问题标题】：Combining Shopify's theme dev framework Slate with the CSS Framework Materialize将 Shopify 的主题开发框架 Slate 与 CSS 框架 Materialize 相结合
【发布时间】：2017-04-24 20:30:04
【问题描述】：

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

创建了一个物化布局

<!-- 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>

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

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

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

【问题讨论】：

标签： css shopify materialize

【解决方案1】：

我正在查看您的问题。您是否让它按预期工作。我一直在尝试自己将引导网格添加到我的石板中

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

/================ UTILS ================/ @import url('tools/mixins.scss');

/=================设置================/ @import url('settings/variables.scss.liquid');

/================= 常见================/ @import url('global/normalize.scss'); @import url('global/slate-reset.scss'); @import url('global/helper-classes.scss'); //@import url('global/grid-bootstrap.scss'); @import url('global/layout.scss'); @import url('global/icons.scss'); @import url('global/rte.scss'); @import url('global/responsive-tables.scss'); @import url('global/links-buttons.scss'); @import url('global/forms.scss'); @import url('global/blank-states.scss');

/================ BOOTSTRAP ================/ @import url('vendor/bootstrap/_grid.scss');

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

虽然My code editor 似乎真的不起作用

在 slate 主题中使用了哪个任务管理器。我想我可以调整任务以生成新的样式表并像这样做：

//引导网格 {{ 'grid.scss.css' |资产网址 |样式表标签 }}

【讨论】：

我的 theme.css 已按预期连接，但似乎存在一个整体问题，可能是在github 上讨论的大型上传文件
感谢您的链接。我会留意的。

【解决方案2】：

将目录 sass/ files 中的 materialize SCSS 文件复制到 slate 生成的 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

上进行了讨论

【讨论】：