將Shopify的主題開發框架Slate與CSS框架相結合Materialise

Question

我需要將Slate目錄複製到Materialise文件中？ 我設法用

<!-- 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公司/上海社會科學院文件夾石板/全球目錄的內容，增加了行

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

到我theme.liquid和跑石板構建，部署和觀看。無法看到上傳到我的主題文件的物化文件。我究竟做錯了什麼？

Answer 1

1. 複製兌現在目錄SASS SCSS的文件/文件，以產生石板的src /風格/供應商目錄

2. 添加以下代碼的src /風格/ 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 

正常運行並創建th eme.scss文件包含所有SCSS組件。所以theme.scss似乎被連接並正確上傳。不幸的是，似乎有一個整體Shopify的問題上討論the slate github repo

Answer 2

我在看你的問題。你是否按預期工作？ 我一直在試圖自己引導網格添加到我的石板他們

1. 添加引導文件：供應商/引導/ _grid.scss（例如，有一羣人）

2. 參考src/styles/theme.scss中的引導資源如下所示：

   /================ UTILS ============= ===/ @import url（'tools/mixins.scss'）;

   /================設置================/ @import url（'settings/variables .scss.liquid'）;

   /================ COMMON ================/ @import URL（'全球/正常化.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 /_格。SCSS'）;

   /================ MODULES ================/ @import URL（'模塊/位點-header.scss'）; @import URL（ '模塊/禮品卡template.scss'）;

確實似乎沒有工作，雖然My code editor

在石板主題用於哪些任務管理器。我想我可以調整的任務已經產生了新的樣式表和STHG做這樣的：

{{「theme.scss.css」 | asset_url | stylesheet_tag}}

//引導電網 {{ 'grid.scss.css' | asset_url | stylesheet_tag}}