Configure css imports in JS files

swisstopo · Dec 3, 2024 · b13506b · b13506b
1 parent 04677b1
commit b13506b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 12 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -108,6 +108,7 @@
     "source-map-loader": "5.0.0",
     "start-server-and-test": "2.0.8",
     "stream-to-promise": "3.0.0",
+    "style-loader": "^4.0.0",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.6.3",

diff --git a/ui/rollup.config.js b/ui/rollup.config.js
@@ -16,6 +16,18 @@ const cesiumSource = 'node_modules/cesium/Source';
 const cesiumWorkers = '../Build/Cesium/Workers';
 const extensions = ['.ts', '.js'];
 
+const postcssPlugins = [
+  inlinesvg(),
+  cssimport({
+    plugins: [
+      postcssurl([
+        {filter: '**/*.+(woff|woff2)', url: (asset) => `fonts/${path.basename(asset.url)}`},
+      ])
+    ]
+  }),
+  autoprefixer()
+];
+
 const config = {
   input: 'src/index.ts',
   output: [{
@@ -27,18 +39,14 @@ const config = {
     postcss({
       minimize: true,
       inject: false,
-      extract: 'index.css',
-      plugins: [
-        inlinesvg(),
-        cssimport({
-          plugins: [
-            postcssurl([
-              {filter: '**/*.+(woff|woff2)', url: (asset) => `fonts/${path.basename(asset.url)}`},
-            ])
-          ]
-        }),
-        autoprefixer()
-      ]
+      extract: false,
+      plugins: postcssPlugins,
+    }),
+    postcss({
+      minimize: true,
+      inject: false,
+      extract: '**/style/index.css',
+      plugins: postcssPlugins,
     }),
     json(),
     resolve({

diff --git a/ui/webpack.config.js b/ui/webpack.config.js
@@ -74,6 +74,12 @@ const config = {
       },
       {
         test: /\.css$/i,
+        issuer: /\.(?:js|ts)$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.css$/i,
+        issuer: {not: [/\.(?:js|ts)$/]},
         //use: [isDev ? "style-loader" : MiniCssExtractPlugin.loader, 'css-loader'],
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },