diff --git a/svelte-webpack/package.json b/svelte-webpack/package.json
index e2ba06c..9cc72f7 100755
--- a/svelte-webpack/package.json
+++ b/svelte-webpack/package.json
@@ -4,6 +4,7 @@
"devDependencies": {
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
+ "linaria": "^1.3.3",
"mini-css-extract-plugin": "^0.6.0",
"serve": "^11.0.0",
"style-loader": "^0.23.1",
diff --git a/svelte-webpack/src/App.svelte b/svelte-webpack/src/App.svelte
index 1f2d3ef..b928c57 100755
--- a/svelte-webpack/src/App.svelte
+++ b/svelte-webpack/src/App.svelte
@@ -1,11 +1,23 @@
-
Hello {name}!
\ No newline at end of file
+Hello {name}!
+This is styled with Linaria styles in a .svelte
file
+This is using Linaria styles imported from a .js
file!
\ No newline at end of file
diff --git a/svelte-webpack/src/styles.js b/svelte-webpack/src/styles.js
new file mode 100644
index 0000000..64a75f5
--- /dev/null
+++ b/svelte-webpack/src/styles.js
@@ -0,0 +1,5 @@
+import { css } from 'linaria';
+
+export const externalStyle = css`
+ font-style: italic;
+`;
\ No newline at end of file
diff --git a/svelte-webpack/webpack.config.js b/svelte-webpack/webpack.config.js
index 994bad7..40a2099 100755
--- a/svelte-webpack/webpack.config.js
+++ b/svelte-webpack/webpack.config.js
@@ -4,6 +4,14 @@ const path = require('path');
const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
+const linariaLoader = {
+ loader: 'linaria/loader',
+ options: {
+ sourceMap: !prod,
+ cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/.linaria-cache')
+ }
+};
+
module.exports = {
entry: {
bundle: ['./src/main.js']
@@ -22,15 +30,24 @@ module.exports = {
},
module: {
rules: [
+ {
+ test: /\.m?js$/,
+ exclude: /node_modules/,
+ use: [linariaLoader]
+ },
{
test: /\.svelte$/,
- use: {
- loader: 'svelte-loader',
- options: {
- emitCss: true,
- hotReload: true
- }
- }
+ use: [
+ linariaLoader,
+ {
+ loader: 'svelte-loader',
+ options: {
+ dev: !prod,
+ emitCss: true,
+ hotReload: true
+ },
+ },
+ ],
},
{
test: /\.css$/,