search

codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 171 forks source link

How to use with webpack? #26

Closed rgaufman closed 5 years ago

rgaufman commented 5 years ago

Hi there, I'm trying to get https://codyhouse.co/gem/vertical-timeline/ working, but it depends on codyhouse-framework.

I'm using webpack and added this to my application.js:

require("codyhouse-framework/main/assets/js/util")
require("vertical-timeline/assets/js/main")
require("vertical-timeline/assets/css/style.scss")

When I run webpack, I get:

ERROR in ./node_modules/vertical-timeline/assets/css/style.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/vertical-timeline/assets/css/style.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '../../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
^
      File to import not found or unreadable: ../../../../../codyhouse-framework/main/assets/css/style.scss.
      in /Users/hackeron/Dropbox/Development/timeline2/node_modules/vertical-timeline/assets/css/style.scss (line 1, column 1)
 @ ./node_modules/vertical-timeline/assets/css/style.scss 2:14-173
 @ ./app/javascript/packs/application.js

How do I import the framework in WebPack?

claudia-romano commented 5 years ago

Hi there, in your application.js file, you'll need to import the style file of the framework as well:

require("codyhouse-framework/main/assets/css/style.scss")

Also, please make sure to remove the following line from vertical-timeline/assets/css/style.scss file:

@import '../../../../../codyhouse-framework/main/assets/css/style.scss';

This was used to import the scss file of the framework but you are already taking care of this in the application.js.