Skip to content

Compile SCSS with Webpack #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ jobs:

- uses: actions/setup-node@v2.1.4
with:
node-version: '12'
node-version: '14'

- name: Cache Ruby gems
uses: actions/cache@v2.1.3
7 changes: 3 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -40,9 +40,8 @@ _site/
node_modules/

# Webpack compiled files
assets/javascript/*.js
assets/javascript/*.js.map
assets/javascript/*sprite*
assets/javascript/*
assets/stylesheets/*

# S3 deployment
# Configuration
.env
2 changes: 1 addition & 1 deletion .ruby-version
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2.7.2
2.7.3
2 changes: 1 addition & 1 deletion .tool-versions
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
ruby 2.7.3
nodejs 12.14.1
nodejs 14.15.1
18 changes: 9 additions & 9 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -4,9 +4,9 @@ GEM
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.6)
concurrent-ruby (1.1.8)
dotenv (1.0.2)
em-websocket (0.5.1)
em-websocket (0.5.2)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
ethon (0.12.0)
@@ -24,23 +24,23 @@ GEM
typhoeus (~> 1.3)
yell (~> 2.0)
http_parser.rb (0.6.0)
i18n (1.8.2)
i18n (1.8.10)
concurrent-ruby (~> 1.0)
jekyll (4.1.0)
jekyll (4.2.0)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.1)
kramdown (~> 2.3)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.4.0)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 1.8)
terminal-table (~> 2.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
@@ -50,7 +50,7 @@ GEM
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.2.1)
listen (3.5.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
@@ -71,11 +71,11 @@ GEM
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.5)
rouge (3.19.0)
rouge (3.26.0)
safe_yaml (1.0.5)
sassc (2.4.0)
ffi (~> 1.9)
terminal-table (1.8.0)
terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1)
typhoeus (1.4.0)
ethon (>= 0.9.0)
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ This template offers rich development experience using the following technologie
| [Jekyll](https://jekyllrb.com/) | Transform plain text into static websites and blogs. |
| [Kramdown](https://kramdown.gettalong.org/) | Ruby-based markdown parser allowing to use both Markdown and HTML.|
| [TailwindCSS](https://tailwindcss.com/) | A utility-first CSS framework for rapidly building custom designs.|
| [Stimulus JS](https://stimulus.hotwire.dev/) | A A modest JavaScript framework for the HTML you already have. |
| [Stimulus JS](https://stimulus.hotwire.dev/) | A modest JavaScript framework for the HTML you already have. |
| [ESLint](http://eslint.org/) | Lint JS. Reports syntax and style issues. |
| [Webpack](https://webpack.js.org) | Bundles npm packages and application JS together. |
| [Docker](https://www.docker.com/) | Open platform to build, ship, and run applications everywhere. |
30 changes: 15 additions & 15 deletions _includes/head.html
Original file line number Diff line number Diff line change
@@ -21,16 +21,16 @@
<meta name="twitter:description" content="{{ meta_description }}" />
<meta name="twitter:image" content="{{ meta_image }}" />

<meta name="apple-mobile-web-app-title" content="Jekyll Template"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#1b79ea"/>
<meta name="apple-mobile-web-app-title" content="Jekyll Template" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#1b79ea" />

<meta name="theme-color" content="#ea1017"/>
<meta name="theme-color" content="#ea1017" />

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
<meta http-equiv="cleartype" content="on" />

<meta name="msapplication-TileColor" content="#fff" />
<meta name="msapplication-TileImage" content="/public/images/favicon/mstile-144x144.png" />
@@ -39,16 +39,16 @@
<meta name="msapplication-wide310x150logo" content="/public/images/favicon/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/public/images/favicon/mstile-310x310.png" />

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/images/favicon/apple-icon-144x144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/public/images/favicon/apple-icon-152x152.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/images/favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/public/images/favicon/apple-icon-152x152.png" />

<link rel="icon" type="image/png" sizes="192x192" href="/public/images/favicon/android-icon-192x192.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/public/images/favicon/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/public/images/favicon/favicon-16x16.png"/>
<link rel="icon" type="image/x-icon" href="/public/images/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="/public/images/favicon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/public/images/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/public/images/favicon/favicon-16x16.png" />
<link rel="icon" type="image/x-icon" href="/public/images/favicon/favicon.ico" />

<link rel="manifest" href="/public/manifest.json">

<link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Open+Sans" />

<link rel="stylesheet" href="/assets/stylesheets/application.css" type="text/css"/>
<link rel="stylesheet" href="/assets/stylesheets/application.css" type="text/css" />
2 changes: 1 addition & 1 deletion _includes/icon-sprite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions _javascript/application.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import '../_scss/application.scss';

import './initializers';
File renamed without changes.
File renamed without changes.
File renamed without changes.
1 change: 0 additions & 1 deletion _js/application.js

This file was deleted.

5 changes: 3 additions & 2 deletions _sass/_variables.scss → _scss/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
// Base
/* Base */

$color-gray: (
primary: #ededed,
dark: #b3b3b3,
darkest: #8f8f8f
);

// Typography
/* Typography */

$base-font-size: 1rem;
$base-font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
$base-line-height: 1.7;
11 changes: 11 additions & 0 deletions _scss/application.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import './variables.scss';

@import './base/typography.scss';

@import './layouts/default.scss';

@import './components/icon.scss';
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
4 changes: 3 additions & 1 deletion _sass/layouts/default.scss → _scss/layouts/_default.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
.layout-default body {
@apply bg-gray-200;

display: grid;
grid-template-rows: 8.5rem 1fr 5rem;

min-height: 100vh;
padding: 0 5vw;
padding: 0 15vw;
}

.layout-default .app-header {
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion assets/images/icon-sprite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file removed assets/javascript/.keep
Empty file.
21 changes: 0 additions & 21 deletions assets/stylesheets/application.scss

This file was deleted.

2 changes: 1 addition & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ const presets = [
];

const plugins = [
"@babel/plugin-proposal-class-properties"
'@babel/plugin-proposal-class-properties'
];

module.exports = { presets, plugins };
7 changes: 2 additions & 5 deletions config/jekyll.yml
Original file line number Diff line number Diff line change
@@ -7,13 +7,9 @@ timezone: Etc/UTC

# Required to use local plugins
safe: false

lsi: false
markdown: kramdown

sass:
style: compressed

kramdown:
# All config options: https://jekyllrb.com/docs/configuration/markdown/
input: GFM
@@ -41,7 +37,8 @@ includes:
exclude:
- .github/
- .idea/
- _js/
- _javascript/
- _scss/
- bin/
- config/
- lib/
Loading
Oops, something went wrong.