processing scss styles

kleber-swf · Aug 30, 2021 · 0a5cc71 · 0a5cc71
1 parent 2dd66f5
commit 0a5cc71
Show file tree

Hide file tree

Showing 14 changed files with 2,443 additions and 104 deletions.
diff --git a/config/rollup.config.dev.js b/config/rollup.config.dev.js
@@ -1,5 +1,7 @@
 import typescript from '@rollup/plugin-typescript';
+import postcssUrl from 'postcss-url';
 import browserSync from 'rollup-plugin-browsersync';
+import postcss from 'rollup-plugin-postcss';
 
 const pkg = require('../package.json');
 const bsConfig = require('./bs-config');
@@ -12,6 +14,17 @@ export default {
 	],
 	treeshake: false,
 	plugins: [
+		postcss({
+			extract: 'phaser-runtime-editor-styles.css',
+			// minimize: true,
+
+			modules: {
+				generateScopedName: "[hash:base64:5]"
+			},
+			plugins: [
+				postcssUrl({ url: 'inline' })
+			]
+		}),
 		typescript({
 			rootDir: './src',
 			tsconfig: 'tsconfig.json',

diff --git a/example/index.html b/example/index.html
@@ -7,8 +7,8 @@
 		<title>Example</title>
 		<script src="/js/phaser.js"></script>
 		<script src="/js/index.js"></script>
-		<link rel="stylesheet" href="styles.css" />
-		<link rel="stylesheet" href="phaser-runtime-editor-styles.css" />
+		<link rel="stylesheet" href="./styles.css" type="text/css" />
+		<link rel="stylesheet" href="./js/phaser-runtime-editor-styles.css" type="text/css" />
 	</head>
 	<body>
 		<div id="game" class="phred-game"></div>

diff --git a/example/phaser-runtime-editor-styles.css b/example/phaser-runtime-editor-styles.css