diff --git a/README.md b/README.md index f5381c03..afaf4cc2 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ It's useful when you, for instance, need to post process the CSS as a string. |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps| |**`camelCase`**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase| |**`importLoaders`**|`{Number}`|`0`|Number of loaders applied before CSS loader| +|**`matchImportLoadersByOrigin`**|`{Boolean}`|`false`|Match import loaders by origin through webpack.config| ### `root` @@ -429,6 +430,48 @@ The query parameter `importLoaders` allows to configure how many loaders before This may change in the future, when the module system (i. e. webpack) supports loader matching by origin. +### `matchImportLoadersByOrigin` + +The query parameter `matchImportLoadersByOrigin` allows to match and use import loaders, defined in webpack.config, for `@import`ed and composed resources. + +**webpack.config.js** +```js +{ + test: /\.css$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + matchImportLoadersByOrigin: true // false => use same loaders as for current file (default); true => match import loaders through webpack.config + } + }, + 'postcss-loader' + ] +}, { + test: /\.sass$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + matchImportLoadersByOrigin: true // false => use same loaders as for current file (default); true => match import loaders through webpack.config + } + }, + 'postcss-loader', + 'sass-loader' + ] +} +``` + +Composing with matchImportLoadersByOrigin set to true. Since imports are resolved through webpack, it is also possible to import from different file types. + +```css + .class-name { + composes: another-class-name from "./some-other-classes.sass" + } +``` +

Examples

### Assets diff --git a/lib/loader.js b/lib/loader.js index ca856cd3..b4cd0a42 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -53,6 +53,10 @@ module.exports = function(content, map) { // for importing CSS var importUrlPrefix = getImportPrefix(this, query); + if (query.matchImportLoadersByOrigin) { + importUrlPrefix = ""; + } + var alreadyImported = {}; var importJs = result.importItems.filter(function(imp) { if(!imp.mediaQuery) { @@ -77,6 +81,12 @@ module.exports = function(content, map) { var idx = +match[1]; var importItem = result.importItems[idx]; var importUrl = importUrlPrefix + importItem.url; + + if (query.matchImportLoadersByOrigin) { + return "\" + require(" + loaderUtils.stringifyRequest(this, importUrl) + ")" + + "[" + JSON.stringify(importItem.export) + "] + \""; + } + return "\" + require(" + loaderUtils.stringifyRequest(this, importUrl) + ").locals" + "[" + JSON.stringify(importItem.export) + "] + \""; }