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$/,