search

Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 365 forks source link

Referencing local assets folder within node_modules package #604

Open ConduciveMammal opened 6 years ago

ConduciveMammal commented 6 years ago

Problem

One of the biggest pros to using CDNs for vendor assets, is that localised assets within those files are already correctly linked up. However, when using vendors via the node_modules packages, these directories no longer exist, and as far as I'm aware, as they're an updatable package, it's not recommended that we change the files within them. So now I'm left a little stumped. I tried inserting Slick Carousel via the node_modules, but because the CSS file's asset paths don't exist, it creates a Webpack error such as this one:

ERROR in ./assets/styles/theme.scss (../node_modules/css-loader??ref--12-1!../node_modules/postcss-loader/lib??postcss!../node_modules/sass-loader/lib/loader.js??ref--12-3!./assets/styles/theme.scss)
Module not found: Error: Can't resolve './ajax-loader.gif' in '/Users/liam/Desktop/ShopifyThemes/Slate2/slatetest/src/assets/styles'
 @ ../node_modules/css-loader??ref--12-1!../node_modules/postcss-loader/lib??postcss!../node_modules/sass-loader/lib/loader.js??ref--12-3!./assets/styles/theme.scss 7:17359-17387
 @ ./assets/styles/theme.scss
 @ ./assets/scripts/layout/theme.js
 @ multi ../node_modules/@shopify/slate-tools/tools/webpack/hot-client.js ./assets/scripts/layout/theme.js

Replication steps

Use Yarn to install the Slick Carousel Package yarn add slick-carousel

Then import package's stylesheet @import '~slick-carousel/slick/slick-theme.scss';

ConduciveMammal commented 6 years ago

In extension to this, stylelint throws the error [stylelint] Unexpected extension ".scss" in imported partial name (scss/at-import-partial-extension-blacklist). This is because I've used slick-theme.scss. The problem now, is the Slick package includes slick-theme.css, slick-theme.scss and slick-theme.less. So if I'm not supposed to include the file extensions, how can I say which file I want?

maxcr commented 6 years ago

Those are prebuilts, each with their own syntatic sugar for different developers who use sass vs scss vs vanilla css. If you wanna be 1337 you can modify their webpack to search for paths relative to node_modules for the slick-carousel package. Its just going to give you an error though about variables since there's a bug with their sass --> liquid --> css compiler refer to #607 . You're only option at this very moment is to regex out sass variables or just use their included prebuilt css file.