Updated config for better sass/typescript support and sensible defaults

Author: rburnham-def

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-public/bundle.*
 package-lock.json
 yarn.lock
 .idea/

.storybook/addons.js

@@ -1,2 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-knobs/register';

.storybook/presets.js

@@ -1 +1,10 @@
-module.exports = ["@storybook/preset-typescript","@storybook/preset-scss"];
+module.exports = [
+    "@storybook/preset-typescript",
+    {
+        name: '@storybook/preset-scss',
+        options: {
+            cssLoaderOptions: {
+                sourceMap: true
+            }
+        }
+    }];

.storybook/webpack.config.js

@@ -1,5 +1,6 @@
 const merge = require('webpack-merge');
 const {CheckerPlugin} = require('awesome-typescript-loader');
+const path = require('path');
 
 
 module.exports = ({config, mode}) => {
@@ -18,7 +19,8 @@ module.exports = ({config, mode}) => {
                 ]
             },
     });
+    mergedConfig.resolve.alias['@styles'] = path.resolve(__dirname, '../src/styles/');
     mergedConfig.plugins.push(new CheckerPlugin());
-    // console.dir(mergedConfig, {depth: null});
+    //console.dir(mergedConfig, {depth: null});
     return mergedConfig;
 };

package.json

@@ -7,7 +7,9 @@
     "@babel/preset-typescript": "^7.6.0",
     "@pyoner/svelte-types": "^3.4.4-2",
     "@storybook/addon-actions": "^5.2.4",
+    "@storybook/addon-knobs": "^5.2.5",
     "@storybook/addon-links": "^5.2.4",
+    "@storybook/addon-viewport": "^5.2.5",
     "@storybook/addons": "^5.2.4",
     "@storybook/preset-scss": "^1.0.2",
     "@storybook/preset-typescript": "^1.1.0",
@@ -24,7 +26,7 @@
     "style-loader": "^0.23.1",
     "svelte": "^3.12.1",
     "svelte-loader": "^2.13.6",
-    "svelte-preprocess": "^3.1.2",
+    "svelte-preprocess": "^3.2.5",
     "ts-loader": "^6.2.1",
     "typescript": "^3.6.4",
     "webpack": "^4.30.0",
@@ -36,5 +38,7 @@
     "build": "webpack --config webpack.prod.js",
     "dev": "webpack-dev-server --open --config webpack.dev.js",
     "storybook": "start-storybook -p 4061"
+  },
+  "dependencies": {
   }
 }

src/App.svelte

@@ -1,5 +1,6 @@
 <script>
     import Button from "./components/button/Button.svelte";
+    import Button2 from "./components/button/Button2.svelte";
 
     export let name;
 </script>
@@ -12,4 +13,5 @@
 
 <h1>Hello {name}!</h1>
 <Button text="Hello"/>
+<Button2 text="Hello"/>
 

tsconfig.json

@@ -1,23 +1,28 @@
 {
   "compilerOptions": {
+    "extendedDiagnostics": true,
     "outDir": "build/lib",
-    "module": "commonjs",
-    "target": "es5",
+    "module": "es6",
+    "target": "es6",
     "lib": ["es5", "es6", "es7", "es2017", "dom"],
     "sourceMap": true,
     "allowJs": false,
     "types": ["@pyoner/svelte-types"],
     "moduleResolution": "node",
     "rootDirs": ["src", "stories"],
     "baseUrl": "src",
+    "paths": {
+      "@styles/*": ["styles/*"],
+      "@common/*": ["common/*"]
+    },
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": false,
     "strict": true,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
@@ -28,5 +33,5 @@
     "babelCore": "@babel/core"
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "build", "scripts"]
+  "exclude": ["node_modules", "build"]
 }

webpack.common.js

@@ -10,10 +10,12 @@ module.exports = {
 	},
 	resolve: {
 		alias: {
-			svelte: path.resolve('node_modules', 'svelte')
+			svelte: path.resolve('node_modules', 'svelte'),
+			'@styles': path.resolve(__dirname, 'src/styles/'),
 		},
-		extensions: ['.mjs', '.ts', '.tsx', '.js', '.svelte'],
-		mainFields: ['svelte', 'browser', 'module', 'main']
+		extensions: ['.mjs', '.ts', '.tsx', '.js', '.svelte', 'scss', 'css'],
+		mainFields: ['svelte', 'browser', 'module', 'main'],
+		modules: [path.resolve(__dirname, 'src'), 'node_modules']
 	},
 	output: {
 		path: path.resolve(__dirname, 'build'),

webpack.dev.js

@@ -12,14 +12,15 @@ module.exports = merge.smart(common, {
     module: {
         rules: [
             {
-                test: /\.css$/,
+                test: /\.(scss|sass|css)$/,
                 use: [
                     /**
                      * MiniCssExtractPlugin doesn't support HMR.
                      * For developing, use 'style-loader' instead.
                      * */
                     'style-loader',
-                    'css-loader',
+                    { loader: 'css-loader', options: { sourceMap: true } },
+                    'sass-loader'
                 ]
             }
         ]

webpack.prod.js

@@ -24,14 +24,15 @@ let config = merge.smart(common, {
                 }
             },
             {
-                test: /\.css$/,
+                test: /\.(scss|sass|css)$/,
                 use: [
                     /**
                      * MiniCssExtractPlugin doesn't support HMR.
                      * For developing, use 'style-loader' instead.
                      * */
                     MiniCssExtractPlugin.loader,
-                    'css-loader',
+                    { loader: 'css-loader', options: { sourceMap: true } },
+                    'sass-loader'
                 ]
             }
         ]