@stylin/msa-loader - npm Package Compare versions

Comparing version 0.0.3-alpha.0 to 0.1.0

package.json

 {
   "name": "@stylin/msa-loader",
-  "version": "0.0.3-alpha.0",
+  "version": "0.1.0",
   "description": "Stylin loader module for webpack",
@@ -40,3 +40,3 @@ "license": "MIT",
   },
-  "gitHead": "43eb0938dc1acc8243b0665302f230dbc77b9fef"
+  "gitHead": "82824a380f9f5754974a579f9e8a07ba9f5ce9dd"
 }

README.md

@@ -1,17 +0,33 @@
-## Webpack loader
+# @stylin/msa-loader
+The primary webpack loader for generation Mapping Style Annotations.
+<br/>
 
-In webpack config, place `@stylin/msa-loader` after `style-loader` in modules/rules.
+## Installation
+```sh
+npm install --save-dev @stylin/msa-loader
+```
 
-Set `modules` to true in options of css-loader: 
+You need to install [style-loader](https://github.com/webpack-contrib/style-loader) or [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin):
 
-`{loader: 'css-loader', options: {modules: true}}`
+```sh
+npm install --save-dev style-loader
+// or
+npm install --save-dev mini-css-extract-plugin
+```
+### ⚠ Important
+Don't install both, use one of them.
+<br/>
 
+### Optional loader and recommended
 ```sh
-npm install --save @stylin/loader
+npm install --save-dev sass-loader
 ```
 
-#### `webpack.config.js`
+<br/>
+
+In webpack configuration file, place `@stylin/msa-loader` after `style-loader` or `mini-css-extract-plugin` in modules/rules.
+
+### webpack.config.js configuration with style-loader:
 ```js
 module.exports = {
-  ...
   module: {
@@ -21,2 +37,3 @@ rules: [{
       use: [
+        `@stylin/ts-loader`, // only if you use TypeScript
         `@stylin/msa-loader`,
@@ -31,2 +48,33 @@ `style-loader`,
 ```
+<br/>
 
+### webpack.config.js configuration with `MiniCssExtractPlugin`:
+```js
+const MiniCssExtractPlugin = require(`mini-css-extract-plugin`)
+
+module.exports = {
+  plugins: [new MiniCssExtractPlugin()],
+  ...
+  module: {
+    rules: [{
+      test: /\.scss$/i,
+      use: [
+        `@stylin/ts-loader`,  // only if you use TypeScript
+        `@stylin/msa-loader`,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {publicPath: `folder-where-css-files-will-be-stored`}
+        },
+        {loader: `css-loader`, options: {modules: true}},
+        `sass-loader`, // optional
+      ],
+    }],
+  }
+}
+```
+<br/>
+
+### ⚠ Important
+Set `modules` to true in options of css-loader: 
+
+`{loader: 'css-loader', options: {modules: true}}`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19350

increased by7.14%

Number of lines in readme file

79

increased by154.84%

No dependency changes