Skip to content

Commit

Permalink
feat: webpackImporter option (#732)
Browse files Browse the repository at this point in the history
  • Loading branch information
evilebottnawi authored Aug 20, 2019
1 parent 0330253 commit 6f4ea37
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 3 deletions.
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,39 @@ module.exports = {

> ℹ In some rare case `node-sass` can output invalid source maps (it is `node-sass` bug), to avoid try to update node-sass to latest version or you can try to set the `outputStyle` option to `compressed` value.
### `webpackImporter`

Type: `Boolean`
Default: `true`

Allows to disable default `webpack` importer.

This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starts with `~` will not work, but you can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
webpackImporter: false,
},
},
],
},
],
},
};
```

## Examples

### Extracts CSS into separate files
Expand Down
13 changes: 10 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,16 @@ function loader(content) {

const sassOptions = getSassOptions(this, options, content);

sassOptions.importer.push(
webpackImporter(this.resourcePath, resolve, addNormalizedDependency)
);
const shouldUseWebpackImporter =
typeof options.webpackImporter === 'boolean'
? options.webpackImporter
: true;

if (shouldUseWebpackImporter) {
sassOptions.importer.push(
webpackImporter(this.resourcePath, resolve, addNormalizedDependency)
);
}

// Skip empty files, otherwise it will stop webpack, see issue #21
if (sassOptions.data.trim() === '') {
Expand Down
49 changes: 49 additions & 0 deletions test/__snapshots__/webpackImporter-options.test.js.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`webpackImporter option false (dart-sass) (sass): errors 1`] = `Array []`;

exports[`webpackImporter option false (dart-sass) (sass): warnings 1`] = `Array []`;

exports[`webpackImporter option false (dart-sass) (scss): errors 1`] = `Array []`;

exports[`webpackImporter option false (dart-sass) (scss): warnings 1`] = `Array []`;

exports[`webpackImporter option false (node-sass) (sass): errors 1`] = `Array []`;

exports[`webpackImporter option false (node-sass) (sass): warnings 1`] = `Array []`;

exports[`webpackImporter option false (node-sass) (scss): errors 1`] = `Array []`;

exports[`webpackImporter option false (node-sass) (scss): warnings 1`] = `Array []`;

exports[`webpackImporter option not specify (dart-sass) (sass): errors 1`] = `Array []`;

exports[`webpackImporter option not specify (dart-sass) (sass): warnings 1`] = `Array []`;

exports[`webpackImporter option not specify (dart-sass) (scss): errors 1`] = `Array []`;

exports[`webpackImporter option not specify (dart-sass) (scss): warnings 1`] = `Array []`;

exports[`webpackImporter option not specify (node-sass) (sass): errors 1`] = `Array []`;

exports[`webpackImporter option not specify (node-sass) (sass): warnings 1`] = `Array []`;

exports[`webpackImporter option not specify (node-sass) (scss): errors 1`] = `Array []`;

exports[`webpackImporter option not specify (node-sass) (scss): warnings 1`] = `Array []`;

exports[`webpackImporter option true (dart-sass) (sass): errors 1`] = `Array []`;

exports[`webpackImporter option true (dart-sass) (sass): warnings 1`] = `Array []`;

exports[`webpackImporter option true (dart-sass) (scss): errors 1`] = `Array []`;

exports[`webpackImporter option true (dart-sass) (scss): warnings 1`] = `Array []`;

exports[`webpackImporter option true (node-sass) (sass): errors 1`] = `Array []`;

exports[`webpackImporter option true (node-sass) (sass): warnings 1`] = `Array []`;

exports[`webpackImporter option true (node-sass) (scss): errors 1`] = `Array []`;

exports[`webpackImporter option true (node-sass) (scss): warnings 1`] = `Array []`;
71 changes: 71 additions & 0 deletions test/webpackImporter-options.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/**
* @jest-environment node
*/
import nodeSass from 'node-sass';
import dartSass from 'sass';

import {
compile,
getTestId,
getCodeFromBundle,
getCodeFromSass,
getImplementationByName,
} from './helpers';

const implementations = [nodeSass, dartSass];
const syntaxStyles = ['scss', 'sass'];

describe('webpackImporter option', () => {
implementations.forEach((implementation) => {
syntaxStyles.forEach((syntax) => {
const [implementationName] = implementation.info.split('\t');

it(`not specify (${implementationName}) (${syntax})`, async () => {
const testId = getTestId('language', syntax);
const options = {
implementation: getImplementationByName(implementationName),
};
const stats = await compile(testId, { loader: { options } });

expect(getCodeFromBundle(stats).css).toBe(
getCodeFromSass(testId, options).css
);

expect(stats.compilation.warnings).toMatchSnapshot('warnings');
expect(stats.compilation.errors).toMatchSnapshot('errors');
});

it(`false (${implementationName}) (${syntax})`, async () => {
const testId = getTestId('language', syntax);
const options = {
webpackImporter: false,
implementation: getImplementationByName(implementationName),
};
const stats = await compile(testId, { loader: { options } });

expect(getCodeFromBundle(stats).css).toBe(
getCodeFromSass(testId, options).css
);

expect(stats.compilation.warnings).toMatchSnapshot('warnings');
expect(stats.compilation.errors).toMatchSnapshot('errors');
});

it(`true (${implementationName}) (${syntax})`, async () => {
const testId = getTestId('language', syntax);
const options = {
webpackImporter: true,
implementation: getImplementationByName(implementationName),
};
const stats = await compile(testId, { loader: { options } });

expect(getCodeFromBundle(stats).css).toBe(
getCodeFromSass(testId, options).css
);

expect(stats.compilation.warnings).toMatchSnapshot('warnings');
expect(stats.compilation.errors).toMatchSnapshot('errors');
});
});
});
});

0 comments on commit 6f4ea37

Please sign in to comment.