indreklasn

  "scripts": {
    "build": "webpack --progress",
    "start": "webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch",
    "production": "NODE_ENV=production webpack -p"
  },

indreklasn

 npm i -g vue-cli && vue init webpack vue-webpack-dashboard && cd vue-webpack-dashboard && npm i --save-dev webpack-dashboard

indreklasn

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
	sass: {
		options: {
			sourceMap: true
		},
		dist: {
			files: {
				'main.css': 'main.scss'

indreklasn

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'));
});

indreklasn

mkdir next-react-ssr && cd next-react-ssr && npm init -y && npm install --save react react-dom next && mkdir pages

indreklasn

touch pages/index.js

indreklasn

const textStyles = {
  color: white,
  backgroundColor: black
}

<p style={textStyles}>inline style!</p>

indreklasn

<p style="color: white; backgrond-color: black;">inline style!</p>

indreklasn

// CSS-in-JS aphrodite example
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  text: {
    backgroundColor: 'black',
    color: 'white',
  },
});

indreklasn

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>