├── .gitattributes ├── .gitignore ├── .babelrc ├── .editorconfig ├── circle.yml ├── test ├── fixture │ ├── sourcemap.js │ ├── minimize.js │ ├── empty-options.js │ └── sass.js └── index.test.js ├── LICENSE ├── package.json ├── src └── index.js └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | /dist 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | ["env", { 6 | "targets": { 7 | "node": "current" 8 | } 9 | }], 10 | "stage-2" 11 | ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | pre: 3 | - mkdir ~/.yarn-cache 4 | node: 5 | version: 7 6 | 7 | dependencies: 8 | pre: 9 | - curl -o- -L https://yarnpkg.com/install.sh | bash 10 | cache_directories: 11 | - "~/.yarn-cache" 12 | override: 13 | - yarn install 14 | -------------------------------------------------------------------------------- /test/fixture/sourcemap.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.css$/, 3 | use: [{ 4 | loader: 'style-loader', 5 | options: { 6 | sourceMap: true 7 | } 8 | }, { 9 | loader: 'css-loader', 10 | options: { 11 | autoprefixer: false, 12 | minimize: undefined, 13 | sourceMap: true 14 | } 15 | }, { 16 | loader: 'postcss-loader', 17 | options: { 18 | sourceMap: true 19 | } 20 | }] 21 | } 22 | -------------------------------------------------------------------------------- /test/fixture/minimize.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.css$/, 3 | use: [{ 4 | loader: 'style-loader', 5 | options: { 6 | sourceMap: undefined 7 | } 8 | }, { 9 | loader: 'css-loader', 10 | options: { 11 | autoprefixer: false, 12 | minimize: true, 13 | sourceMap: undefined 14 | } 15 | }, { 16 | loader: 'postcss-loader', 17 | options: { 18 | sourceMap: undefined 19 | } 20 | }] 21 | } 22 | -------------------------------------------------------------------------------- /test/fixture/empty-options.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.css$/, 3 | use: [{ 4 | loader: 'style-loader', 5 | options: { 6 | sourceMap: undefined 7 | } 8 | }, { 9 | loader: 'css-loader', 10 | options: { 11 | autoprefixer: false, 12 | minimize: undefined, 13 | sourceMap: undefined 14 | } 15 | }, { 16 | loader: 'postcss-loader', 17 | options: { 18 | sourceMap: undefined 19 | } 20 | }] 21 | } 22 | -------------------------------------------------------------------------------- /test/fixture/sass.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.sass$/, 3 | use: [{ 4 | loader: 'style-loader', 5 | options: { 6 | sourceMap: undefined 7 | } 8 | }, { 9 | loader: 'css-loader', 10 | options: { 11 | autoprefixer: false, 12 | minimize: undefined, 13 | sourceMap: undefined 14 | } 15 | }, { 16 | loader: 'postcss-loader', 17 | options: { 18 | sourceMap: undefined 19 | } 20 | }, { 21 | loader: 'sass-loader', 22 | options: { 23 | indentedSyntax: true, 24 | sourceMap: undefined 25 | } 26 | }] 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) EGOIST <0x142857@gmail.com> (github.com/egoist) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | import HandleCSSLoader from '../src' 2 | 3 | test('simple', () => { 4 | const getLoader = new HandleCSSLoader() 5 | expect(getLoader.css()).toEqual(require('./fixture/empty-options')) 6 | }) 7 | 8 | test('sourcemap', () => { 9 | const getLoader = new HandleCSSLoader({ 10 | sourceMap: true 11 | }) 12 | expect(getLoader.css()).toEqual(require('./fixture/sourcemap')) 13 | }) 14 | 15 | test('minimize', () => { 16 | const getLoader = new HandleCSSLoader({ 17 | minimize: true 18 | }) 19 | expect(getLoader.css()).toEqual(require('./fixture/minimize')) 20 | }) 21 | 22 | test('built-in sass loader', () => { 23 | const getLoader = new HandleCSSLoader() 24 | expect(getLoader.sass()).toEqual(require('./fixture/sass')) 25 | }) 26 | 27 | test('extract', () => { 28 | const getLoader = new HandleCSSLoader({ extract: true, sourceMap: true }) 29 | const { use } = getLoader.css() 30 | expect(use[0].loader).toMatch(/mini-css-extract-plugin\/dist\/loader/) 31 | }) 32 | 33 | test('vue', () => { 34 | const getLoader = new HandleCSSLoader() 35 | const loaders = getLoader.vue() 36 | expect(Object.keys(loaders)).toEqual([ 37 | 'css', 'sass', 'scss', 'less', 'stylus', 'styl' 38 | ]) 39 | }) 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-handle-css-loader", 3 | "version": "3.0.1", 4 | "description": "A little helper module for adding CSS and CSS extraction support in webpack.", 5 | "license": "MIT", 6 | "repository": "egoist/webpack-handle-css-loader", 7 | "author": { 8 | "name": "EGOIST", 9 | "email": "0x142857@gmail.com", 10 | "url": "https://github.com/egoist" 11 | }, 12 | "engines": { 13 | "node": ">=4" 14 | }, 15 | "scripts": { 16 | "prepublishOnly": "npm run build", 17 | "test": "jest && xo", 18 | "build": "bili --target node --no-babel.babelrc", 19 | "docs": "documentation readme src/index.js -s API" 20 | }, 21 | "files": [ 22 | "dist" 23 | ], 24 | "main": "dist/webpack-handle-css-loader.cjs.js", 25 | "keywords": [ 26 | "css-loader", 27 | "webpack" 28 | ], 29 | "devDependencies": { 30 | "babel-preset-env": "^1.4.0", 31 | "babel-preset-stage-2": "^6.24.1", 32 | "bili": "^3.0.4", 33 | "documentation": "^4.0.0-rc.1", 34 | "eslint-config-rem": "^3.0.1", 35 | "jest-cli": "^19.0.2", 36 | "mini-css-extract-plugin": "^0.2.0", 37 | "webpack": "^4.1.0", 38 | "xo": "^0.18.1" 39 | }, 40 | "jest": { 41 | "testEnvironment": "node" 42 | }, 43 | "xo": { 44 | "extends": "rem", 45 | "envs": [ 46 | "jest" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export default class HandleCSSLoader { 2 | /** 3 | * @param {Object} options 4 | * @param {string} [options.styleLoader='style-loader'] style-loader name or path. 5 | * @param {string} [options.cssLoader='css-loader'] css-loader name or path. 6 | * @param {string} [options.extractLoader='mini-css-extract-plugin/dist/loader'] loader path of mini-css-extract-plugin. 7 | * @param {Object|boolean} [options.postcss=undefined] Disable or set options for postcss-loader. 8 | * @param {boolean} [options.sourceMap=undefined] Enable sourcemaps. 9 | * @param {boolean} [options.extract=undefined] Enable CSS extraction. 10 | * @param {boolean} [options.minimize=undefined] Enable CSS minimization. 11 | * @param {boolean} [options.cssModules=undefined] Enable CSS modules. 12 | */ 13 | constructor({ 14 | styleLoader = 'style-loader', 15 | cssLoader = 'css-loader', 16 | postcss, 17 | sourceMap, 18 | extract, 19 | minimize, 20 | cssModules, 21 | extractLoader 22 | } = {}) { 23 | this.styleLoader = styleLoader 24 | this.cssLoader = cssLoader 25 | this.postcssOptions = postcss 26 | this.sourceMap = sourceMap 27 | this.extract = extract 28 | this.minimize = minimize 29 | this.cssModules = cssModules 30 | this.extractLoader = extractLoader 31 | if (extract && !this.extractLoader) { 32 | this.extractLoader = require.resolve('mini-css-extract-plugin/dist/loader') 33 | } 34 | } 35 | 36 | /** 37 | * Set value of instance option 38 | * @param {string} key 39 | * @param {any} value 40 | */ 41 | set(key, value) { 42 | this[key] = value 43 | } 44 | 45 | /** 46 | * Get the rule for specific loader 47 | * @param {RegExp} [test=undefined] File matcher 48 | * @param {RegExp} [loader=undefined] Loader name or path to it 49 | * @param {any} [options=undefined] Options for relevant loader 50 | * @return {Object} {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 51 | */ 52 | getLoader(test, loader, options = {}) { 53 | const cssLoaderOptions = { 54 | autoprefixer: false, 55 | sourceMap: this.sourceMap, 56 | minimize: this.minimize 57 | } 58 | 59 | if (this.cssModules) { 60 | cssLoaderOptions.modules = true 61 | cssLoaderOptions.importLoaders = 1 62 | cssLoaderOptions.localIdentName = '[name]_[local]__[hash:base64:5]' 63 | } 64 | 65 | if (loader === 'css-loader') { 66 | Object.assign(cssLoaderOptions, options) 67 | } 68 | 69 | const use = [ 70 | { 71 | loader: this.cssLoader, 72 | options: cssLoaderOptions 73 | } 74 | ] 75 | 76 | if (loader !== 'postcss-loader' && this.postcssOptions !== false) { 77 | const postcssOptions = { 78 | sourceMap: this.sourceMap 79 | } 80 | 81 | if (Array.isArray(this.postcssOptions)) { 82 | postcssOptions.plugins = this.postcssOptions 83 | } else if (typeof this.postcssOptions === 'object') { 84 | Object.assign(postcssOptions, this.postcssOptions) 85 | } 86 | 87 | use.push({ 88 | loader: 'postcss-loader', 89 | options: postcssOptions 90 | }) 91 | } 92 | 93 | if (loader && loader !== 'css-loader') { 94 | use.push({ 95 | loader, 96 | options: { 97 | ...options, 98 | sourceMap: this.sourceMap 99 | } 100 | }) 101 | } 102 | 103 | return { 104 | test, 105 | use: this.extract ? 106 | [ 107 | { 108 | loader: this.extractLoader 109 | }, 110 | ...use 111 | ] : 112 | [ 113 | { 114 | loader: this.styleLoader, 115 | options: { 116 | sourceMap: this.sourceMap 117 | } 118 | }, 119 | ...use 120 | ] 121 | } 122 | } 123 | 124 | /** 125 | * Get the rule for css files 126 | * @param {RegExp} [test=/\.css$/] File matcher 127 | * @param {any} [options=undefined] Options for css-loader 128 | * @return {Object} {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 129 | */ 130 | css(test, options) { 131 | test = test || /\.css$/ 132 | return this.getLoader(test, 'css-loader', options) 133 | } 134 | 135 | /** 136 | * Get the rule for sass files 137 | * @param {RegExp} [test=/\.sass$/] File matcher 138 | * @param {any} [options=undefined] Options for sass-loader, `indentedSyntax` for sass-loader is `true` here 139 | * @return {Object} {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 140 | */ 141 | sass(test, options = {}) { 142 | test = test || /\.sass$/ 143 | return this.getLoader(test, 'sass-loader', { 144 | indentedSyntax: true, 145 | ...options 146 | }) 147 | } 148 | 149 | /** 150 | * Get the rule for scss files 151 | * @param {RegExp} [test=/\.scss$/] File matcher 152 | * @param {any} [options=undefined] Options for sass-loader 153 | * @return {Object} {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 154 | */ 155 | scss(test, options) { 156 | test = test || /\.scss$/ 157 | return this.getLoader(test, 'sass-loader', options) 158 | } 159 | 160 | /** 161 | * Get the rule for less files 162 | * @param {RegExp} [test=/\.less$/] File matcher 163 | * @param {any} [options=undefined] Options for less-loader 164 | * @return {Object} [Rule] {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 165 | */ 166 | less(test, options) { 167 | test = test || /\.less$/ 168 | return this.getLoader(test, 'less-loader', options) 169 | } 170 | 171 | /** 172 | * Get the rule for stylus files 173 | * @param {RegExp} [test=/\.stylus$/] File matcher 174 | * @param {any} [options=undefined] Options for stylus-loader 175 | * @return {Object} {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 176 | */ 177 | stylus(test, options) { 178 | test = test || /\.stylus$/ 179 | return this.getLoader(test, 'stylus-loader', options) 180 | } 181 | 182 | /** 183 | * Get the rule for styl files 184 | * @param {RegExp} [test=/\.styl$/] File matcher 185 | * @param {any} [options=undefined] Options for stylus-loader 186 | * @return {Object} {@link https://webpack.js.org/configuration/module/#rule webpack Rule} 187 | */ 188 | styl(test, options) { 189 | test = test || /\.styl$/ 190 | return this.getLoader(test, 'stylus-loader', options) 191 | } 192 | 193 | /** 194 | * Get the `loaders` options for vue-loader 195 | * @param {any} [options={}] Options for relevant loaders 196 | * @return {Object} 197 | * @example 198 | * handleLoader.vue({ 199 | * scss: {}, 200 | * less: {} 201 | * }) 202 | */ 203 | vue(options = {}) { 204 | this.postcssOptions = false 205 | this.cssModules = false 206 | const loaders = {} 207 | for (const lang of ['css', 'sass', 'scss', 'less', 'stylus', 'styl']) { 208 | loaders[lang] = this[lang](null, options[lang]).use 209 | } 210 | return loaders 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-handle-css-loader 2 | 3 | [![NPM version](https://img.shields.io/npm/v/webpack-handle-css-loader.svg?style=flat-square)](https://npmjs.com/package/webpack-handle-css-loader) [![NPM downloads](https://img.shields.io/npm/dm/webpack-handle-css-loader.svg?style=flat-square)](https://npmjs.com/package/webpack-handle-css-loader) [![Build Status](https://img.shields.io/circleci/project/egoist/webpack-handle-css-loader/master.svg?style=flat-square)](https://circleci.com/gh/egoist/webpack-handle-css-loader) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat-square)](https://github.com/egoist/donate) 4 | 5 | This is a short-hand module for adding css and extracting css support. 6 | 7 | ## Install 8 | 9 | ```bash 10 | yarn add webpack-handle-css-loader 11 | 12 | # If you want to extract CSS 13 | # Install this plugin as well 14 | yarn add mini-css-extract-plugin 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```js 20 | const HandleCSSLoader = require('webpack-handle-css-loader') 21 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 22 | 23 | const isProd = process.env.NODE_ENV === 'production' 24 | 25 | const handleLoader = new HandleCSSLoader({ 26 | minimize: isProd, 27 | extract: isProd, 28 | sourceMap: false, 29 | cssModules: false 30 | }) 31 | 32 | module.exports = { 33 | module: { 34 | rules: [ 35 | // Handle .css files with css-loader & postcss-loader 36 | handleLoader.css(), 37 | // Handle .sass files 38 | // Similar to above but add sass-loader too 39 | handleLoader.sass() 40 | ] 41 | }, 42 | plugins: [ 43 | isProd && new MiniCssExtractPlugin({ 44 | // Options similar to the same options in webpackOptions.output 45 | // both options are optional 46 | filename: "[name].css", 47 | chunkFilename: "[id].css" 48 | }) 49 | ].filter(Boolean) 50 | } 51 | ``` 52 | 53 | > **Note:** 54 | > 55 | > We add `postcss-loader` to each rule, which means in `handleLoader.css()` you got something like `['style-loader', 'css-loader', 'postcss-loader']`, see [here](#constructor) for how to disable it or set options for it. 56 | 57 | ## API 58 | 59 | 60 | 61 | ### constructor 62 | 63 | **Parameters** 64 | 65 | - `options` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`) 66 | - `options.styleLoader` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** style-loader name or path. (optional, default `'style-loader'`) 67 | - `options.cssLoader` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** css-loader name or path. (optional, default `'css-loader'`) 68 | - `options.postcss` **([Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean))** Disable or set options for postcss-loader. (optional, default `undefined`) 69 | - `options.sourceMap` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Enable sourcemaps. (optional, default `undefined`) 70 | - `options.extract` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Enable CSS extraction. (optional, default `undefined`) 71 | - `options.minimize` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Enable CSS minimization. (optional, default `undefined`) 72 | - `options.cssModules` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Enable CSS modules. (optional, default `undefined`) 73 | - `options.extractLoader` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** loader path of mini-css-extract-plugin. (optional, default `'mini-css-extract-plugin/dist/loader'`) 74 | 75 | ### set 76 | 77 | Set value of instance option 78 | 79 | **Parameters** 80 | 81 | - `key` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 82 | - `value` **any** 83 | 84 | ### getLoader 85 | 86 | Get the rule for specific loader 87 | 88 | **Parameters** 89 | 90 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `undefined`) 91 | - `loader` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** Loader name or path to it (optional, default `undefined`) 92 | - `options` **any** Options for relevant loader (optional, default `undefined`) 93 | 94 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack Rule](https://webpack.js.org/configuration/module/#rule) 95 | 96 | ### css 97 | 98 | Get the rule for css files 99 | 100 | **Parameters** 101 | 102 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `/\.css$/`) 103 | - `options` **any** Options for css-loader (optional, default `undefined`) 104 | 105 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack Rule](https://webpack.js.org/configuration/module/#rule) 106 | 107 | ### sass 108 | 109 | Get the rule for sass files 110 | 111 | **Parameters** 112 | 113 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `/\.sass$/`) 114 | - `options` **any** Options for sass-loader, `indentedSyntax` for sass-loader is `true` here (optional, default `undefined`) 115 | 116 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack Rule](https://webpack.js.org/configuration/module/#rule) 117 | 118 | ### scss 119 | 120 | Get the rule for scss files 121 | 122 | **Parameters** 123 | 124 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `/\.scss$/`) 125 | - `options` **any** Options for sass-loader (optional, default `undefined`) 126 | 127 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack Rule](https://webpack.js.org/configuration/module/#rule) 128 | 129 | ### less 130 | 131 | Get the rule for less files 132 | 133 | **Parameters** 134 | 135 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `/\.less$/`) 136 | - `options` **any** Options for less-loader (optional, default `undefined`) 137 | 138 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [Rule] [webpack Rule](https://webpack.js.org/configuration/module/#rule) 139 | 140 | ### stylus 141 | 142 | Get the rule for stylus files 143 | 144 | **Parameters** 145 | 146 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `/\.stylus$/`) 147 | - `options` **any** Options for stylus-loader (optional, default `undefined`) 148 | 149 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack Rule](https://webpack.js.org/configuration/module/#rule) 150 | 151 | ### styl 152 | 153 | Get the rule for styl files 154 | 155 | **Parameters** 156 | 157 | - `test` **[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** File matcher (optional, default `/\.styl$/`) 158 | - `options` **any** Options for stylus-loader (optional, default `undefined`) 159 | 160 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack Rule](https://webpack.js.org/configuration/module/#rule) 161 | 162 | ### vue 163 | 164 | Get the `loaders` options for vue-loader 165 | 166 | **Parameters** 167 | 168 | - `options` **any** Options for relevant loaders (optional, default `{}`) 169 | 170 | **Examples** 171 | 172 | ```javascript 173 | handleLoader.vue({ 174 | scss: {}, 175 | less: {} 176 | }) 177 | ``` 178 | 179 | Returns **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** 180 | 181 | ## Contributing 182 | 183 | 1. Fork it! 184 | 2. Create your feature branch: `git checkout -b my-new-feature` 185 | 3. Commit your changes: `git commit -am 'Add some feature'` 186 | 4. Push to the branch: `git push origin my-new-feature` 187 | 5. Submit a pull request :D 188 | 189 | ## Author 190 | 191 | **webpack-handle-css-loader** © [EGOIST](https://github.com/egoist), Released under the [MIT](https://egoist.mit-license.org/) License.
192 | Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/webpack-handle-css-loader/contributors)). 193 | 194 | > [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily) 195 | --------------------------------------------------------------------------------