From 648aa62264758dad815e1b47a7356b42e7841717 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 9 Jul 2019 20:33:56 +0200 Subject: [PATCH] grafana/toolkit: Copy or extract static files (#18006) * Replace webpack ng annotate plugin with babel-plugin-angularjs-annotate * Copy statics(png/svg) when necessary or keep the original path when files loaded via file-loader * Update readme --- packages/grafana-toolkit/README.md | 4 +++- packages/grafana-toolkit/src/config/webpack.plugin.config.ts | 4 ++-- packages/grafana-toolkit/src/config/webpack/loaders.ts | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/grafana-toolkit/README.md b/packages/grafana-toolkit/README.md index 71ff7376ac9..58b94d101c1 100644 --- a/packages/grafana-toolkit/README.md +++ b/packages/grafana-toolkit/README.md @@ -84,7 +84,7 @@ Adidtionaly, you can also provide additional Jest config via package.json file. ## Working with CSS & static assets -We support pure css, SASS and CSS in JS approach (via Emotion). All static assets referenced in your code (i.e. images) should be placed under `src/static` directory and referenced using relative paths. +We support pure css, SASS and CSS in JS approach (via Emotion). 1. Single css/sass file Create your css/sass file and import it in your plugin entry point (typically module.ts): @@ -101,6 +101,8 @@ If you want to provide different stylesheets for dark/light theme, create `dark. TODO: add note about loadPluginCss +Note that static files (png, svg, json, html) are all copied to dist directory when the plugin is bundled. Relative paths to those files does not change. + 3. Emotion Starting from Grafana 6.2 our suggested way of styling plugins is by using [Emotion](https://emotion.sh). It's a css-in-js library that we use internaly at Grafana. The biggest advantage of using Emotion is that you will get access to Grafana Theme variables. diff --git a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts index 3b640df789d..8d1c6bde235 100644 --- a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts +++ b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts @@ -83,8 +83,8 @@ const getCommonPlugins = (options: WebpackConfigurationOptions) => { { from: '../LICENSE', to: '.' }, { from: 'img/*', to: '.' }, { from: '**/*.json', to: '.' }, - // { from: '**/*.svg', to: '.' }, - // { from: '**/*.png', to: '.' }, + { from: '**/*.svg', to: '.' }, + { from: '**/*.png', to: '.' }, { from: '**/*.html', to: '.' }, ], { logLevel: options.watch ? 'silent' : 'warn' } diff --git a/packages/grafana-toolkit/src/config/webpack/loaders.ts b/packages/grafana-toolkit/src/config/webpack/loaders.ts index 3cdcfeee486..30941f7972e 100644 --- a/packages/grafana-toolkit/src/config/webpack/loaders.ts +++ b/packages/grafana-toolkit/src/config/webpack/loaders.ts @@ -122,8 +122,8 @@ export const getFileLoaders = () => { ? { loader: 'file-loader', options: { - outputPath: 'static', - name: '[name].[hash:8].[ext]', + outputPath: '/', + name: '[path][name].[ext]', }, } : // When using single css import images are inlined as base64 URIs in the result bundle