Replace vue-style-loader with mini-css-extract-plugin

ryanelian · Apr 8, 2021 · 4e812bf · 4e812bf
1 parent 342c74e
commit 4e812bf
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 90 deletions.
diff --git a/README.MD b/README.MD
@@ -553,8 +553,6 @@ declare module "*.vue" {
 }
 ```
 
-- Basic CSS in `<style>` (or `<style scoped>` or `<style module>`) code blocks should work, but Sass CANNOT be used and the resulting CSS will NOT be auto-prefixed and minified. **You are advised to write CSS using the instapack Sass project instead!**
-
 > When using Visual Studio Code, install [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) extension to get syntax highlighting and TypeScript intellisense.
 
 ### Vue 3: Single-File Components
@@ -608,6 +606,16 @@ declare module '*.vue' {
 }
 ```
 
+### Importing CSS from JS
+
+**Is not recommended.**
+
+```js
+import './my.css';
+```
+
+Yes it works, but the resulting CSS is not auto-prefixed and minified for production build and Sass cannot be used. **Opt to develop the stylesheet in the Sass project instead.**
+
 ### Sass CSS Module System
 
 instapack also has a custom Node-like but [standard-compliant Sass module system](https://github.com/sass/sass/blob/master/accepted/module-system.md) using [`@use`](https://sass-lang.com/documentation/at-rules/use), [`@forward`](https://sass-lang.com/documentation/at-rules/forward), and [`@import`](https://sass-lang.com/documentation/at-rules/import) syntaxes.

diff --git a/bin/TypeScriptBuildEngine.js b/bin/TypeScriptBuildEngine.js
diff --git a/bin/loaders/LoaderPaths.js b/bin/loaders/LoaderPaths.js
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "html-minifier": "4.0.0",
     "loader-utils": "2.0.0",
     "merge-source-map": "1.1.0",
+    "mini-css-extract-plugin": "1.4.1",
     "portfinder": "1.0.28",
     "postcss": "8.2.9",
     "progress": "2.0.3",
@@ -83,7 +84,6 @@
     "source-map": "0.6.1",
     "typescript": "4.2.3",
     "upath": "2.0.1",
-    "vue-style-loader": "4.1.3",
     "webpack": "5.30.0",
     "webpack-plugin-serve": "1.4.1",
     "which": "2.0.2",
@@ -94,6 +94,7 @@
     "@types/eslint": "^7.2.8",
     "@types/follow-redirects": "^1.13.0",
     "@types/fs-extra": "^9.0.10",
+    "@types/mini-css-extract-plugin": "^1.4.1",
     "@types/node": "^14.14.37",
     "@types/progress": "^2.0.3",
     "@types/sass": "^1.16.0",