lgs / sapper-codyframe Goto Github PK

This project is a template for Sapper if you want to work with CodyFrame framework (from Cody House) and you want to compile the SASS files and useing it directly with Rollup

Note: You can use this template directly or you can follow the instructions below

After getting the template of sapper for Rollup by:

npx degit "sveltejs/sapper-template#rollup" my-app

You have to install the ordinary dependencies by npm install and try to run it by : npm run dev & open http://localhost:3000

If you have this issue UnhandledPromiseRejectionWarning: Error: No valid exports main found for /..node_modules/@rollup/pluginutils just remove the rollup package from npm and reinstall a new version of it like "2.13.0".

Also if you don't have Polka install it by npm install --save polka

You can use express js instead of Polka, learn how to do that from this Youtube video

• svelte-preprocess
• autoprefixer
• node-sass

npm install -D node-sass autoprefixer svelte-preprocess

or

yarn add -D node-sass autoprefixer svelte-preprocess

Inside the rollup.config.js file, add these lines outside of export default to be accessible globally:

// for sass (codyframe)
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
  },
  postcss: {
    plugins: [require('autoprefixer')],
  },
});

Also add these lines in both Client and Server sections inside of svelte({...}):

svelte({
  ...
  preprocess // Add this line
  ...
}),

Clone the official project from GitHub: Here

We just want the assets folder, So copy it inside codyframe folder in your src folder.

We want the style.scss and util.js later.

Add these lines in the template.html file inside src folder:

• in header section

<!--  cody framework	 -->
<script>document.getElementsByTagName("html")[0].className += " js";</script>

In _layout.svelte file inside of routes folder, Add these lines directly after<script>...</script> lines:

<!-- candy framework Scss - Global -->
<style lang="scss" global>
@import "./codyframe/assets/css/style.scss"
</style>

Also add important javascript libraries like this:

<!--  cody framework - js library -->
<svelte:head>
    <script defer src="codyframe/util.js"></script>
</svelte:head>

Don't forget to add util.js inside of codyframe folder in static folder of the project

In your index.svelte route, Add any code to test codyframe components, Like this Button:

 <div><button class="btn btn--primary btn--md">Zaki Button!</button></div>

Big Thanks to Sean Schertell, He wrote a great article about Sapper & Sass 😊

Also Thanks to @HamzaPlus for the IDEA 😊

My twitter Zakaria Chahboun