feat: initial commit
This commit is contained in:
20
node_modules/sass-loader/LICENSE
generated
vendored
Normal file
20
node_modules/sass-loader/LICENSE
generated
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
680
node_modules/sass-loader/README.md
generated
vendored
Normal file
680
node_modules/sass-loader/README.md
generated
vendored
Normal file
@ -0,0 +1,680 @@
|
||||
<div align="center">
|
||||
<img height="170"
|
||||
src="https://worldvectorlogo.com/logos/sass-1.svg">
|
||||
<a href="https://github.com/webpack/webpack">
|
||||
<img width="200" height="200"
|
||||
src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
[![npm][npm]][npm-url]
|
||||
[![node][node]][node-url]
|
||||
[![deps][deps]][deps-url]
|
||||
[![tests][tests]][tests-url]
|
||||
[![coverage][cover]][cover-url]
|
||||
[![chat][chat]][chat-url]
|
||||
[![size][size]][size-url]
|
||||
|
||||
# sass-loader
|
||||
|
||||
Loads a Sass/SCSS file and compiles it to CSS.
|
||||
|
||||
## Getting Started
|
||||
|
||||
To begin, you'll need to install `sass-loader`:
|
||||
|
||||
```console
|
||||
npm install sass-loader sass webpack --save-dev
|
||||
```
|
||||
|
||||
`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass) or [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below).
|
||||
|
||||
This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
|
||||
|
||||
> ℹ️ We highly recommend using [Dart Sass](https://github.com/sass/dart-sass).
|
||||
|
||||
> ⚠ [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature and doesn't support [@use rule](https://sass-lang.com/documentation/at-rules/use).
|
||||
|
||||
Chain the `sass-loader` with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
|
||||
|
||||
Then add the loader to your Webpack configuration. For example:
|
||||
|
||||
**app.js**
|
||||
|
||||
```js
|
||||
import "./style.scss";
|
||||
```
|
||||
|
||||
**style.scss**
|
||||
|
||||
```scss
|
||||
$body-color: red;
|
||||
|
||||
body {
|
||||
color: $body-color;
|
||||
}
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
// Creates `style` nodes from JS strings
|
||||
"style-loader",
|
||||
// Translates CSS into CommonJS
|
||||
"css-loader",
|
||||
// Compiles Sass to CSS
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Finally run `webpack` via your preferred method.
|
||||
|
||||
### Resolving `import` at-rules
|
||||
|
||||
Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org/concepts/module-resolution/).
|
||||
|
||||
The `sass-loader` uses Sass's custom importer feature to pass all queries to the Webpack resolving engine.
|
||||
Thus you can import your Sass modules from `node_modules`.
|
||||
|
||||
```scss
|
||||
@import "bootstrap";
|
||||
```
|
||||
|
||||
Using `~` is deprecated and can be removed from your code (**we recommend it**), but we still support it for historical reasons.
|
||||
Why can you remove it? The loader will first try to resolve `@import` as a relative path. If it cannot be resolved, then the loader will try to resolve `@import` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).
|
||||
|
||||
Prepending module paths with a `~` tells webpack to search through [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).
|
||||
|
||||
```scss
|
||||
@import "~bootstrap";
|
||||
```
|
||||
|
||||
It's important to prepend it with only `~`, because `~/` resolves to the home directory.
|
||||
Webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS and Sass files have no special syntax for importing relative files.
|
||||
Writing `@import "style.scss"` is the same as `@import "./style.scss";`
|
||||
|
||||
### Problems with `url(...)`
|
||||
|
||||
Since Sass implementations don't provide [url rewriting](https://github.com/sass/libsass/issues/532), all linked assets must be relative to the output.
|
||||
|
||||
- If you pass the generated CSS on to the `css-loader`, all urls must be relative to the entry-file (e.g. `main.scss`).
|
||||
- If you're just generating CSS without passing it to the `css-loader`, it must be relative to your web root.
|
||||
|
||||
You will be disrupted by this first issue. It is natural to expect relative references to be resolved against the `.sass`/`.scss` file in which they are specified (like in regular `.css` files).
|
||||
|
||||
Thankfully there are a two solutions to this problem:
|
||||
|
||||
- Add the missing url rewriting using the [resolve-url-loader](https://github.com/bholloway/resolve-url-loader). Place it before `sass-loader` in the loader chain.
|
||||
- Library authors usually provide a variable to modify the asset path. [bootstrap-sass](https://github.com/twbs/bootstrap-sass) for example has an `$icon-font-path`.
|
||||
|
||||
## Options
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| :---------------------------------------: | :------------------: | :-------------------------------------: | :---------------------------------------------------------------- |
|
||||
| **[`implementation`](#implementation)** | `{Object}` | `sass` | Setup Sass implementation to use. |
|
||||
| **[`sassOptions`](#sassoptions)** | `{Object\|Function}` | defaults values for Sass implementation | Options for Sass. |
|
||||
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps. |
|
||||
| **[`additionalData`](#additionaldata)** | `{String\|Function}` | `undefined` | Prepends/Appends `Sass`/`SCSS` code before the actual entry file. |
|
||||
| **[`webpackImporter`](#webpackimporter)** | `{Boolean}` | `true` | Enables/Disables the default Webpack importer. |
|
||||
|
||||
### `implementation`
|
||||
|
||||
Type: `Object`
|
||||
Default: `sass`
|
||||
|
||||
The special `implementation` option determines which implementation of Sass to use.
|
||||
|
||||
By default the loader resolve the implementation based on your dependencies.
|
||||
Just add required implementation to `package.json` (`sass` or `node-sass` package) and install dependencies.
|
||||
|
||||
Example where the `sass-loader` loader uses the `sass` (`dart-sass`) implementation:
|
||||
|
||||
**package.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"sass-loader": "^7.2.0",
|
||||
"sass": "^1.22.10"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Example where the `sass-loader` loader uses the `node-sass` implementation:
|
||||
|
||||
**package.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"sass-loader": "^7.2.0",
|
||||
"node-sass": "^5.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Beware the situation when `node-sass` and `sass` were installed! By default the `sass-loader` prefers `sass`.
|
||||
In order to avoid this situation you can use the `implementation` option.
|
||||
|
||||
The `implementation` options either accepts `sass` (`Dart Sass`) or `node-sass` as a module.
|
||||
|
||||
For example, to use Dart Sass, you'd pass:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
// Prefer `dart-sass`
|
||||
implementation: require("sass"),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Note that when using `sass` (`Dart Sass`), **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks.
|
||||
To avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path.
|
||||
|
||||
We automatically inject the [`fibers`](https://github.com/laverdet/node-fibers) package (setup `sassOptions.fiber`) for `Node.js` less v16.0.0 if is possible (i.e. you need install the [`fibers`](https://github.com/laverdet/node-fibers) package).
|
||||
|
||||
> Fibers is not compatible with `Node.js` v16.0.0 or later ([see introduction to readme](https://github.com/laverdet/node-fibers)).
|
||||
|
||||
**package.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"sass-loader": "^7.2.0",
|
||||
"sass": "^1.22.10",
|
||||
"fibers": "^4.0.1"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can disable automatically injecting the [`fibers`](https://github.com/laverdet/node-fibers) package by passing a `false` value for the `sassOptions.fiber` option.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
implementation: require("sass"),
|
||||
sassOptions: {
|
||||
fiber: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
You can also pass the `fiber` value using this code:
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
implementation: require("sass"),
|
||||
sassOptions: {
|
||||
fiber: require("fibers"),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `sassOptions`
|
||||
|
||||
Type: `Object|Function`
|
||||
Default: defaults values for Sass implementation
|
||||
|
||||
Options for [Dart Sass](http://sass-lang.com/dart-sass) or [Node Sass](https://github.com/sass/node-sass) implementation.
|
||||
|
||||
> ℹ️ The `indentedSyntax` option has `true` value for the `sass` extension.
|
||||
|
||||
> ℹ️ Options such as `data` and `file` are unavailable and will be ignored.
|
||||
|
||||
> ℹ We recommend not to set the `outFile`, `sourceMapContents`, `sourceMapEmbed`, `sourceMapRoot` options because `sass-loader` automatically sets these options when the `sourceMap` option is `true`.
|
||||
|
||||
> ℹ️ Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside the custom importer can be done using the `this.webpackLoaderContext` property.
|
||||
|
||||
There is a slight difference between the `sass` (`dart-sass`) and `node-sass` options.
|
||||
|
||||
Please consult documentation before using them:
|
||||
|
||||
- [Dart Sass documentation](https://github.com/sass/dart-sass#javascript-api) for all available `sass` options.
|
||||
- [Node Sass documentation](https://github.com/sass/node-sass/#options) for all available `node-sass` options.
|
||||
|
||||
#### `Object`
|
||||
|
||||
Use and object for the Sass implementation setup.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sassOptions: {
|
||||
indentWidth: 4,
|
||||
includePaths: ["absolute/path/a", "absolute/path/b"],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `Function`
|
||||
|
||||
Allows to setup the Sass implementation by setting different options based on the loader context.
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sassOptions: (loaderContext) => {
|
||||
// More information about available properties https://webpack.js.org/api/loaders/
|
||||
const { resourcePath, rootContext } = loaderContext;
|
||||
const relativePath = path.relative(rootContext, resourcePath);
|
||||
|
||||
if (relativePath === "styles/foo.scss") {
|
||||
return {
|
||||
includePaths: ["absolute/path/c", "absolute/path/d"],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
includePaths: ["absolute/path/a", "absolute/path/b"],
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `sourceMap`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: depends on the `compiler.devtool` value
|
||||
|
||||
Enables/Disables generation of source maps.
|
||||
|
||||
By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.
|
||||
All values enable source map generation except `eval` and `false` value.
|
||||
|
||||
> ℹ If a `true` the `sourceMap`, `sourceMapRoot`, `sourceMapEmbed`, `sourceMapContents` and `omitSourceMapUrl` from `sassOptions` will be ignored.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
> ℹ In some rare cases `node-sass` can output invalid source maps (it is a `node-sass` bug).
|
||||
|
||||
> > In order to avoid this, you can try to update `node-sass` to latest version or you can try to set within `sassOptions` the `outputStyle` option to `compressed`.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
sassOptions: {
|
||||
outputStyle: "compressed",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `additionalData`
|
||||
|
||||
Type: `String|Function`
|
||||
Default: `undefined`
|
||||
|
||||
Prepends `Sass`/`SCSS` code before the actual entry file.
|
||||
In this case, the `sass-loader` will not override the `data` option but just **prepend** the entry's content.
|
||||
|
||||
This is especially useful when some of your Sass variables depend on the environment:
|
||||
|
||||
#### `String`
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
additionalData: "$env: " + process.env.NODE_ENV + ";",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `Function`
|
||||
|
||||
##### Sync
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
additionalData: (content, loaderContext) => {
|
||||
// More information about available properties https://webpack.js.org/api/loaders/
|
||||
const { resourcePath, rootContext } = loaderContext;
|
||||
const relativePath = path.relative(rootContext, resourcePath);
|
||||
|
||||
if (relativePath === "styles/foo.scss") {
|
||||
return "$value: 100px;" + content;
|
||||
}
|
||||
|
||||
return "$value: 200px;" + content;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
##### Async
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
additionalData: async (content, loaderContext) => {
|
||||
// More information about available properties https://webpack.js.org/api/loaders/
|
||||
const { resourcePath, rootContext } = loaderContext;
|
||||
const relativePath = path.relative(rootContext, resourcePath);
|
||||
|
||||
if (relativePath === "styles/foo.scss") {
|
||||
return "$value: 100px;" + content;
|
||||
}
|
||||
|
||||
return "$value: 200px;" + content;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `webpackImporter`
|
||||
|
||||
Type: `Boolean`
|
||||
Default: `true`
|
||||
|
||||
Enables/Disables the default Webpack importer.
|
||||
|
||||
This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work.
|
||||
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
|
||||
|
||||
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
|
||||
|
||||
There are two possibilities to extract a style sheet from the bundle:
|
||||
|
||||
- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
|
||||
- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
// fallback to style-loader in development
|
||||
process.env.NODE_ENV !== "production"
|
||||
? "style-loader"
|
||||
: MiniCssExtractPlugin.loader,
|
||||
"css-loader",
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
// Options similar to the same options in webpackOptions.output
|
||||
// both options are optional
|
||||
filename: "[name].css",
|
||||
chunkFilename: "[id].css",
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Source maps
|
||||
|
||||
Enables/Disables generation of source maps.
|
||||
|
||||
To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sass-loader` _and_ the css-loader.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
devtool: "source-map", // any "source-map"-like devtool is possible
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
"style-loader",
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
If you want to edit the original Sass files inside Chrome, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/webpack-contrib/sass-loader/tree/master/test) for a running example.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please take a moment to read our contributing guidelines if you haven't yet done so.
|
||||
|
||||
[CONTRIBUTING](./.github/CONTRIBUTING.md)
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
[npm]: https://img.shields.io/npm/v/sass-loader.svg
|
||||
[npm-url]: https://npmjs.com/package/sass-loader
|
||||
[node]: https://img.shields.io/node/v/sass-loader.svg
|
||||
[node-url]: https://nodejs.org
|
||||
[deps]: https://david-dm.org/webpack-contrib/sass-loader.svg
|
||||
[deps-url]: https://david-dm.org/webpack-contrib/sass-loader
|
||||
[tests]: https://github.com/webpack-contrib/sass-loader/workflows/sass-loader/badge.svg
|
||||
[tests-url]: https://github.com/webpack-contrib/sass-loader/actions
|
||||
[cover]: https://codecov.io/gh/webpack-contrib/sass-loader/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack-contrib/sass-loader
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
[size]: https://packagephobia.now.sh/badge?p=sass-loader
|
||||
[size-url]: https://packagephobia.now.sh/result?p=sass-loader
|
32
node_modules/sass-loader/dist/SassError.js
generated
vendored
Normal file
32
node_modules/sass-loader/dist/SassError.js
generated
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
class SassError extends Error {
|
||||
constructor(sassError) {
|
||||
super();
|
||||
this.name = "SassError";
|
||||
this.originalSassError = sassError;
|
||||
this.loc = {
|
||||
line: sassError.line,
|
||||
column: sassError.column
|
||||
}; // Keep original error if `sassError.formatted` is unavailable
|
||||
|
||||
this.message = `${this.name}: ${this.originalSassError.message}`;
|
||||
|
||||
if (this.originalSassError.formatted) {
|
||||
this.message = `${this.name}: ${this.originalSassError.formatted.replace(/^Error: /, "")}`; // Instruct webpack to hide the JS stack from the console.
|
||||
// Usually you're only interested in the SASS stack in this case.
|
||||
|
||||
this.hideStack = true;
|
||||
Error.captureStackTrace(this, this.constructor);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var _default = SassError;
|
||||
exports.default = _default;
|
5
node_modules/sass-loader/dist/cjs.js
generated
vendored
Normal file
5
node_modules/sass-loader/dist/cjs.js
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
"use strict";
|
||||
|
||||
const loader = require("./index");
|
||||
|
||||
module.exports = loader.default;
|
77
node_modules/sass-loader/dist/index.js
generated
vendored
Normal file
77
node_modules/sass-loader/dist/index.js
generated
vendored
Normal file
@ -0,0 +1,77 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _options = _interopRequireDefault(require("./options.json"));
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
||||
var _SassError = _interopRequireDefault(require("./SassError"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
/**
|
||||
* The sass-loader makes node-sass and dart-sass available to webpack modules.
|
||||
*
|
||||
* @this {object}
|
||||
* @param {string} content
|
||||
*/
|
||||
async function loader(content) {
|
||||
const options = this.getOptions(_options.default);
|
||||
const callback = this.async();
|
||||
const implementation = (0, _utils.getSassImplementation)(this, options.implementation);
|
||||
|
||||
if (!implementation) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
|
||||
const useSourceMap = typeof options.sourceMap === "boolean" ? options.sourceMap : this.sourceMap;
|
||||
const sassOptions = await (0, _utils.getSassOptions)(this, options, content, implementation, useSourceMap);
|
||||
const shouldUseWebpackImporter = typeof options.webpackImporter === "boolean" ? options.webpackImporter : true;
|
||||
|
||||
if (shouldUseWebpackImporter) {
|
||||
const {
|
||||
includePaths
|
||||
} = sassOptions;
|
||||
sassOptions.importer.push((0, _utils.getWebpackImporter)(this, implementation, includePaths));
|
||||
}
|
||||
|
||||
const render = (0, _utils.getRenderFunctionFromSassImplementation)(implementation);
|
||||
render(sassOptions, (error, result) => {
|
||||
if (error) {
|
||||
// There are situations when the `file` property do not exist
|
||||
if (error.file) {
|
||||
// `node-sass` returns POSIX paths
|
||||
this.addDependency(_path.default.normalize(error.file));
|
||||
}
|
||||
|
||||
callback(new _SassError.default(error));
|
||||
return;
|
||||
}
|
||||
|
||||
let map = result.map ? JSON.parse(result.map) : null; // Modify source paths only for webpack, otherwise we do nothing
|
||||
|
||||
if (map && useSourceMap) {
|
||||
map = (0, _utils.normalizeSourceMap)(map, this.rootContext);
|
||||
}
|
||||
|
||||
result.stats.includedFiles.forEach(includedFile => {
|
||||
const normalizedIncludedFile = _path.default.normalize(includedFile); // Custom `importer` can return only `contents` so includedFile will be relative
|
||||
|
||||
|
||||
if (_path.default.isAbsolute(normalizedIncludedFile)) {
|
||||
this.addDependency(normalizedIncludedFile);
|
||||
}
|
||||
});
|
||||
callback(null, result.css.toString(), map);
|
||||
});
|
||||
}
|
||||
|
||||
var _default = loader;
|
||||
exports.default = _default;
|
42
node_modules/sass-loader/dist/options.json
generated
vendored
Normal file
42
node_modules/sass-loader/dist/options.json
generated
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"title": "Sass Loader options",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"implementation": {
|
||||
"description": "The implementation of the sass to be used (https://github.com/webpack-contrib/sass-loader#implementation).",
|
||||
"type": "object"
|
||||
},
|
||||
"sassOptions": {
|
||||
"description": "Options for `node-sass` or `sass` (`Dart Sass`) implementation. (https://github.com/webpack-contrib/sass-loader#implementation).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "object",
|
||||
"additionalProperties": true
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"additionalData": {
|
||||
"description": "Prepends/Appends `Sass`/`SCSS` code before the actual entry file (https://github.com/webpack-contrib/sass-loader#additionaldata).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceMap": {
|
||||
"description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/sass-loader#sourcemap).",
|
||||
"type": "boolean"
|
||||
},
|
||||
"webpackImporter": {
|
||||
"description": "Enables/Disables default `webpack` importer (https://github.com/webpack-contrib/sass-loader#webpackimporter).",
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
497
node_modules/sass-loader/dist/utils.js
generated
vendored
Normal file
497
node_modules/sass-loader/dist/utils.js
generated
vendored
Normal file
@ -0,0 +1,497 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.getSassImplementation = getSassImplementation;
|
||||
exports.getSassOptions = getSassOptions;
|
||||
exports.getWebpackResolver = getWebpackResolver;
|
||||
exports.getWebpackImporter = getWebpackImporter;
|
||||
exports.getRenderFunctionFromSassImplementation = getRenderFunctionFromSassImplementation;
|
||||
exports.normalizeSourceMap = normalizeSourceMap;
|
||||
exports.isSupportedFibers = isSupportedFibers;
|
||||
|
||||
var _url = _interopRequireDefault(require("url"));
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _full = require("klona/full");
|
||||
|
||||
var _neoAsync = _interopRequireDefault(require("neo-async"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function getDefaultSassImplementation() {
|
||||
let sassImplPkg = "sass";
|
||||
|
||||
try {
|
||||
require.resolve("sass");
|
||||
} catch (error) {
|
||||
try {
|
||||
require.resolve("node-sass");
|
||||
|
||||
sassImplPkg = "node-sass";
|
||||
} catch (ignoreError) {
|
||||
sassImplPkg = "sass";
|
||||
}
|
||||
} // eslint-disable-next-line import/no-dynamic-require, global-require
|
||||
|
||||
|
||||
return require(sassImplPkg);
|
||||
}
|
||||
/**
|
||||
* @public
|
||||
* This function is not Webpack-specific and can be used by tools wishing to
|
||||
* mimic `sass-loader`'s behaviour, so its signature should not be changed.
|
||||
*/
|
||||
|
||||
|
||||
function getSassImplementation(loaderContext, implementation) {
|
||||
let resolvedImplementation = implementation;
|
||||
|
||||
if (!resolvedImplementation) {
|
||||
try {
|
||||
resolvedImplementation = getDefaultSassImplementation();
|
||||
} catch (error) {
|
||||
loaderContext.emitError(error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
info
|
||||
} = resolvedImplementation;
|
||||
|
||||
if (!info) {
|
||||
loaderContext.emitError(new Error("Unknown Sass implementation."));
|
||||
return;
|
||||
}
|
||||
|
||||
const infoParts = info.split("\t");
|
||||
|
||||
if (infoParts.length < 2) {
|
||||
loaderContext.emitError(new Error(`Unknown Sass implementation "${info}".`));
|
||||
return;
|
||||
}
|
||||
|
||||
const [implementationName] = infoParts;
|
||||
|
||||
if (implementationName === "dart-sass") {
|
||||
// eslint-disable-next-line consistent-return
|
||||
return resolvedImplementation;
|
||||
} else if (implementationName === "node-sass") {
|
||||
// eslint-disable-next-line consistent-return
|
||||
return resolvedImplementation;
|
||||
}
|
||||
|
||||
loaderContext.emitError(new Error(`Unknown Sass implementation "${implementationName}".`));
|
||||
}
|
||||
|
||||
function isProductionLikeMode(loaderContext) {
|
||||
return loaderContext.mode === "production" || !loaderContext.mode;
|
||||
}
|
||||
|
||||
function proxyCustomImporters(importers, loaderContext) {
|
||||
return [].concat(importers).map(importer => function proxyImporter(...args) {
|
||||
this.webpackLoaderContext = loaderContext;
|
||||
return importer.apply(this, args);
|
||||
});
|
||||
}
|
||||
|
||||
function isSupportedFibers() {
|
||||
const [nodeVersion] = process.versions.node.split(".");
|
||||
return Number(nodeVersion) < 16;
|
||||
}
|
||||
/**
|
||||
* Derives the sass options from the loader context and normalizes its values with sane defaults.
|
||||
*
|
||||
* @param {object} loaderContext
|
||||
* @param {object} loaderOptions
|
||||
* @param {string} content
|
||||
* @param {object} implementation
|
||||
* @param {boolean} useSourceMap
|
||||
* @returns {Object}
|
||||
*/
|
||||
|
||||
|
||||
async function getSassOptions(loaderContext, loaderOptions, content, implementation, useSourceMap) {
|
||||
const options = (0, _full.klona)(loaderOptions.sassOptions ? typeof loaderOptions.sassOptions === "function" ? loaderOptions.sassOptions(loaderContext) || {} : loaderOptions.sassOptions : {});
|
||||
const isDartSass = implementation.info.includes("dart-sass");
|
||||
|
||||
if (isDartSass && isSupportedFibers()) {
|
||||
const shouldTryToResolveFibers = !options.fiber && options.fiber !== false;
|
||||
|
||||
if (shouldTryToResolveFibers) {
|
||||
let fibers;
|
||||
|
||||
try {
|
||||
fibers = require.resolve("fibers");
|
||||
} catch (_error) {// Nothing
|
||||
}
|
||||
|
||||
if (fibers) {
|
||||
// eslint-disable-next-line global-require, import/no-dynamic-require
|
||||
options.fiber = require(fibers);
|
||||
}
|
||||
} else if (options.fiber === false) {
|
||||
// Don't pass the `fiber` option for `sass` (`Dart Sass`)
|
||||
delete options.fiber;
|
||||
}
|
||||
} else {
|
||||
// Don't pass the `fiber` option for `node-sass`
|
||||
delete options.fiber;
|
||||
}
|
||||
|
||||
options.file = loaderContext.resourcePath;
|
||||
options.data = loaderOptions.additionalData ? typeof loaderOptions.additionalData === "function" ? await loaderOptions.additionalData(content, loaderContext) : `${loaderOptions.additionalData}\n${content}` : content; // opt.outputStyle
|
||||
|
||||
if (!options.outputStyle && isProductionLikeMode(loaderContext)) {
|
||||
options.outputStyle = "compressed";
|
||||
}
|
||||
|
||||
if (useSourceMap) {
|
||||
// Deliberately overriding the sourceMap option here.
|
||||
// node-sass won't produce source maps if the data option is used and options.sourceMap is not a string.
|
||||
// In case it is a string, options.sourceMap should be a path where the source map is written.
|
||||
// But since we're using the data option, the source map will not actually be written, but
|
||||
// all paths in sourceMap.sources will be relative to that path.
|
||||
// Pretty complicated... :(
|
||||
options.sourceMap = true;
|
||||
options.outFile = _path.default.join(loaderContext.rootContext, "style.css.map");
|
||||
options.sourceMapContents = true;
|
||||
options.omitSourceMapUrl = true;
|
||||
options.sourceMapEmbed = false;
|
||||
}
|
||||
|
||||
const {
|
||||
resourcePath
|
||||
} = loaderContext;
|
||||
|
||||
const ext = _path.default.extname(resourcePath); // If we are compiling sass and indentedSyntax isn't set, automatically set it.
|
||||
|
||||
|
||||
if (ext && ext.toLowerCase() === ".sass" && typeof options.indentedSyntax === "undefined") {
|
||||
options.indentedSyntax = true;
|
||||
} else {
|
||||
options.indentedSyntax = Boolean(options.indentedSyntax);
|
||||
} // Allow passing custom importers to `sass`/`node-sass`. Accepts `Function` or an array of `Function`s.
|
||||
|
||||
|
||||
options.importer = options.importer ? proxyCustomImporters(Array.isArray(options.importer) ? options.importer : [options.importer], loaderContext) : [];
|
||||
options.includePaths = [].concat(process.cwd()).concat( // We use `includePaths` in context for resolver, so it should be always absolute
|
||||
(options.includePaths || []).map(includePath => _path.default.isAbsolute(includePath) ? includePath : _path.default.join(process.cwd(), includePath))).concat(process.env.SASS_PATH ? process.env.SASS_PATH.split(process.platform === "win32" ? ";" : ":") : []);
|
||||
return options;
|
||||
}
|
||||
|
||||
const MODULE_REQUEST_REGEX = /^[^?]*~/; // Examples:
|
||||
// - ~package
|
||||
// - ~package/
|
||||
// - ~@org
|
||||
// - ~@org/
|
||||
// - ~@org/package
|
||||
// - ~@org/package/
|
||||
|
||||
const IS_MODULE_IMPORT = /^~([^/]+|[^/]+\/|@[^/]+[/][^/]+|@[^/]+\/?|@[^/]+[/][^/]+\/)$/;
|
||||
/**
|
||||
* When `sass`/`node-sass` tries to resolve an import, it uses a special algorithm.
|
||||
* Since the `sass-loader` uses webpack to resolve the modules, we need to simulate that algorithm.
|
||||
* This function returns an array of import paths to try.
|
||||
* The last entry in the array is always the original url to enable straight-forward webpack.config aliases.
|
||||
*
|
||||
* We don't need emulate `dart-sass` "It's not clear which file to import." errors (when "file.ext" and "_file.ext" files are present simultaneously in the same directory).
|
||||
* This reduces performance and `dart-sass` always do it on own side.
|
||||
*
|
||||
* @param {string} url
|
||||
* @param {boolean} forWebpackResolver
|
||||
* @param {string} rootContext
|
||||
* @returns {Array<string>}
|
||||
*/
|
||||
|
||||
function getPossibleRequests( // eslint-disable-next-line no-shadow
|
||||
url, forWebpackResolver = false) {
|
||||
let request = url; // In case there is module request, send this to webpack resolver
|
||||
|
||||
if (forWebpackResolver) {
|
||||
if (MODULE_REQUEST_REGEX.test(url)) {
|
||||
request = request.replace(MODULE_REQUEST_REGEX, "");
|
||||
}
|
||||
|
||||
if (IS_MODULE_IMPORT.test(url)) {
|
||||
request = request[request.length - 1] === "/" ? request : `${request}/`;
|
||||
return [...new Set([request, url])];
|
||||
}
|
||||
} // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
|
||||
// @see https://github.com/webpack-contrib/sass-loader/issues/167
|
||||
|
||||
|
||||
const ext = _path.default.extname(request).toLowerCase(); // Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time.
|
||||
// To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:
|
||||
// - imports where the URL ends with .css.
|
||||
// - imports where the URL begins http:// or https://.
|
||||
// - imports where the URL is written as a url().
|
||||
// - imports that have media queries.
|
||||
//
|
||||
// The `node-sass` package sends `@import` ending on `.css` to importer, it is bug, so we skip resolve
|
||||
|
||||
|
||||
if (ext === ".css") {
|
||||
return [];
|
||||
}
|
||||
|
||||
const dirname = _path.default.dirname(request);
|
||||
|
||||
const basename = _path.default.basename(request);
|
||||
|
||||
return [...new Set([`${dirname}/_${basename}`, request].concat(forWebpackResolver ? [`${_path.default.dirname(url)}/_${basename}`, url] : []))];
|
||||
}
|
||||
|
||||
function promiseResolve(callbackResolve) {
|
||||
return (context, request) => new Promise((resolve, reject) => {
|
||||
callbackResolve(context, request, (error, result) => {
|
||||
if (error) {
|
||||
reject(error);
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const IS_SPECIAL_MODULE_IMPORT = /^~[^/]+$/; // `[drive_letter]:\` + `\\[server]\[sharename]\`
|
||||
|
||||
const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
|
||||
/**
|
||||
* @public
|
||||
* Create the resolve function used in the custom Sass importer.
|
||||
*
|
||||
* Can be used by external tools to mimic how `sass-loader` works, for example
|
||||
* in a Jest transform. Such usages will want to wrap `resolve.create` from
|
||||
* [`enhanced-resolve`]{@link https://github.com/webpack/enhanced-resolve} to
|
||||
* pass as the `resolverFactory` argument.
|
||||
*
|
||||
* @param {Function} resolverFactory - A factory function for creating a Webpack
|
||||
* resolver.
|
||||
* @param {Object} implementation - The imported Sass implementation, both
|
||||
* `sass` (Dart Sass) and `node-sass` are supported.
|
||||
* @param {string[]} [includePaths] - The list of include paths passed to Sass.
|
||||
*
|
||||
* @throws If a compatible Sass implementation cannot be found.
|
||||
*/
|
||||
|
||||
function getWebpackResolver(resolverFactory, implementation, includePaths = []) {
|
||||
async function startResolving(resolutionMap) {
|
||||
if (resolutionMap.length === 0) {
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
const [{
|
||||
possibleRequests
|
||||
}] = resolutionMap;
|
||||
|
||||
if (possibleRequests.length === 0) {
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
const [{
|
||||
resolve,
|
||||
context
|
||||
}] = resolutionMap;
|
||||
|
||||
try {
|
||||
return await resolve(context, possibleRequests[0]);
|
||||
} catch (_ignoreError) {
|
||||
const [, ...tailResult] = possibleRequests;
|
||||
|
||||
if (tailResult.length === 0) {
|
||||
const [, ...tailResolutionMap] = resolutionMap;
|
||||
return startResolving(tailResolutionMap);
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
|
||||
resolutionMap[0].possibleRequests = tailResult;
|
||||
return startResolving(resolutionMap);
|
||||
}
|
||||
}
|
||||
|
||||
const isDartSass = implementation.info.includes("dart-sass");
|
||||
const sassResolve = promiseResolve(resolverFactory({
|
||||
alias: [],
|
||||
aliasFields: [],
|
||||
conditionNames: [],
|
||||
descriptionFiles: [],
|
||||
extensions: [".sass", ".scss", ".css"],
|
||||
exportsFields: [],
|
||||
mainFields: [],
|
||||
mainFiles: ["_index", "index"],
|
||||
modules: [],
|
||||
restrictions: [/\.((sa|sc|c)ss)$/i],
|
||||
preferRelative: true
|
||||
}));
|
||||
const webpackResolve = promiseResolve(resolverFactory({
|
||||
dependencyType: "sass",
|
||||
conditionNames: ["sass", "style"],
|
||||
mainFields: ["sass", "style", "main", "..."],
|
||||
mainFiles: ["_index", "index", "..."],
|
||||
extensions: [".sass", ".scss", ".css"],
|
||||
restrictions: [/\.((sa|sc|c)ss)$/i],
|
||||
preferRelative: true
|
||||
}));
|
||||
return (context, request) => {
|
||||
// See https://github.com/webpack/webpack/issues/12340
|
||||
// Because `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`
|
||||
// custom importer may not return `{ file: '/path/to/name.ext' }` and therefore our `context` will be relative
|
||||
if (!isDartSass && !_path.default.isAbsolute(context)) {
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
const originalRequest = request;
|
||||
const isFileScheme = originalRequest.slice(0, 5).toLowerCase() === "file:";
|
||||
|
||||
if (isFileScheme) {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
request = _url.default.fileURLToPath(originalRequest);
|
||||
} catch (ignoreError) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
request = request.slice(7);
|
||||
}
|
||||
}
|
||||
|
||||
let resolutionMap = [];
|
||||
const needEmulateSassResolver = // `sass` doesn't support module import
|
||||
!IS_SPECIAL_MODULE_IMPORT.test(request) && // We need improve absolute paths handling.
|
||||
// Absolute paths should be resolved:
|
||||
// - Server-relative URLs - `<context>/path/to/file.ext` (where `<context>` is root context)
|
||||
// - Absolute path - `/full/path/to/file.ext` or `C:\\full\path\to\file.ext`
|
||||
!isFileScheme && !originalRequest.startsWith("/") && !IS_NATIVE_WIN32_PATH.test(originalRequest);
|
||||
|
||||
if (includePaths.length > 0 && needEmulateSassResolver) {
|
||||
// The order of import precedence is as follows:
|
||||
//
|
||||
// 1. Filesystem imports relative to the base file.
|
||||
// 2. Custom importer imports.
|
||||
// 3. Filesystem imports relative to the working directory.
|
||||
// 4. Filesystem imports relative to an `includePaths` path.
|
||||
// 5. Filesystem imports relative to a `SASS_PATH` path.
|
||||
//
|
||||
// `sass` run custom importers before `3`, `4` and `5` points, we need to emulate this behavior to avoid wrong resolution.
|
||||
const sassPossibleRequests = getPossibleRequests(request); // `node-sass` calls our importer before `1. Filesystem imports relative to the base file.`, so we need emulate this too
|
||||
|
||||
if (!isDartSass) {
|
||||
resolutionMap = resolutionMap.concat({
|
||||
resolve: sassResolve,
|
||||
context: _path.default.dirname(context),
|
||||
possibleRequests: sassPossibleRequests
|
||||
});
|
||||
}
|
||||
|
||||
resolutionMap = resolutionMap.concat( // eslint-disable-next-line no-shadow
|
||||
includePaths.map(context => {
|
||||
return {
|
||||
resolve: sassResolve,
|
||||
context,
|
||||
possibleRequests: sassPossibleRequests
|
||||
};
|
||||
}));
|
||||
}
|
||||
|
||||
const webpackPossibleRequests = getPossibleRequests(request, true);
|
||||
resolutionMap = resolutionMap.concat({
|
||||
resolve: webpackResolve,
|
||||
context: _path.default.dirname(context),
|
||||
possibleRequests: webpackPossibleRequests
|
||||
});
|
||||
return startResolving(resolutionMap);
|
||||
};
|
||||
}
|
||||
|
||||
const matchCss = /\.css$/i;
|
||||
|
||||
function getWebpackImporter(loaderContext, implementation, includePaths) {
|
||||
const resolve = getWebpackResolver(loaderContext.getResolve, implementation, includePaths);
|
||||
return (originalUrl, prev, done) => {
|
||||
resolve(prev, originalUrl).then(result => {
|
||||
// Add the result as dependency.
|
||||
// Although we're also using stats.includedFiles, this might come in handy when an error occurs.
|
||||
// In this case, we don't get stats.includedFiles from node-sass/sass.
|
||||
loaderContext.addDependency(_path.default.normalize(result)); // By removing the CSS file extension, we trigger node-sass to include the CSS file instead of just linking it.
|
||||
|
||||
done({
|
||||
file: result.replace(matchCss, "")
|
||||
});
|
||||
}) // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
|
||||
.catch(() => {
|
||||
done({
|
||||
file: originalUrl
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
let nodeSassJobQueue = null;
|
||||
/**
|
||||
* Verifies that the implementation and version of Sass is supported by this loader.
|
||||
*
|
||||
* @param {Object} implementation
|
||||
* @returns {Function}
|
||||
*/
|
||||
|
||||
function getRenderFunctionFromSassImplementation(implementation) {
|
||||
const isDartSass = implementation.info.includes("dart-sass");
|
||||
|
||||
if (isDartSass) {
|
||||
return implementation.render.bind(implementation);
|
||||
} // There is an issue with node-sass when async custom importers are used
|
||||
// See https://github.com/sass/node-sass/issues/857#issuecomment-93594360
|
||||
// We need to use a job queue to make sure that one thread is always available to the UV lib
|
||||
|
||||
|
||||
if (nodeSassJobQueue === null) {
|
||||
const threadPoolSize = Number(process.env.UV_THREADPOOL_SIZE || 4);
|
||||
nodeSassJobQueue = _neoAsync.default.queue(implementation.render.bind(implementation), threadPoolSize - 1);
|
||||
}
|
||||
|
||||
return nodeSassJobQueue.push.bind(nodeSassJobQueue);
|
||||
}
|
||||
|
||||
const ABSOLUTE_SCHEME = /^[A-Za-z0-9+\-.]+:/;
|
||||
|
||||
function getURLType(source) {
|
||||
if (source[0] === "/") {
|
||||
if (source[1] === "/") {
|
||||
return "scheme-relative";
|
||||
}
|
||||
|
||||
return "path-absolute";
|
||||
}
|
||||
|
||||
if (IS_NATIVE_WIN32_PATH.test(source)) {
|
||||
return "path-absolute";
|
||||
}
|
||||
|
||||
return ABSOLUTE_SCHEME.test(source) ? "absolute" : "path-relative";
|
||||
}
|
||||
|
||||
function normalizeSourceMap(map, rootContext) {
|
||||
const newMap = map; // result.map.file is an optional property that provides the output filename.
|
||||
// Since we don't know the final filename in the webpack build chain yet, it makes no sense to have it.
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
||||
delete newMap.file; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
newMap.sourceRoot = ""; // node-sass returns POSIX paths, that's why we need to transform them back to native paths.
|
||||
// This fixes an error on windows where the source-map module cannot resolve the source maps.
|
||||
// @see https://github.com/webpack-contrib/sass-loader/issues/366#issuecomment-279460722
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
|
||||
newMap.sources = newMap.sources.map(source => {
|
||||
const sourceType = getURLType(source); // Do no touch `scheme-relative`, `path-absolute` and `absolute` types
|
||||
|
||||
if (sourceType === "path-relative") {
|
||||
return _path.default.resolve(rootContext, _path.default.normalize(source));
|
||||
}
|
||||
|
||||
return source;
|
||||
});
|
||||
return newMap;
|
||||
}
|
103
node_modules/sass-loader/package.json
generated
vendored
Normal file
103
node_modules/sass-loader/package.json
generated
vendored
Normal file
@ -0,0 +1,103 @@
|
||||
{
|
||||
"name": "sass-loader",
|
||||
"version": "11.1.1",
|
||||
"description": "Sass loader for webpack",
|
||||
"license": "MIT",
|
||||
"repository": "webpack-contrib/sass-loader",
|
||||
"author": "J. Tangelder",
|
||||
"homepage": "https://github.com/webpack-contrib/sass-loader",
|
||||
"bugs": "https://github.com/webpack-contrib/sass-loader/issues",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"main": "dist/cjs.js",
|
||||
"engines": {
|
||||
"node": ">= 10.13.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run build -- -w",
|
||||
"clean": "del-cli dist",
|
||||
"prebuild": "npm run clean",
|
||||
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
|
||||
"commitlint": "commitlint --from=master",
|
||||
"security": "npm audit",
|
||||
"lint:prettier": "prettier --list-different .",
|
||||
"lint:js": "eslint --cache .",
|
||||
"lint": "npm-run-all -l -p \"lint:**\"",
|
||||
"test:only": "cross-env NODE_ENV=test jest",
|
||||
"test:watch": "npm run test:only -- --watch",
|
||||
"test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
|
||||
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
|
||||
"pretest": "npm run lint",
|
||||
"test": "npm run test:coverage",
|
||||
"prepare": "husky install && npm run build",
|
||||
"release": "standard-version"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"fibers": ">= 3.1.0",
|
||||
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
|
||||
"sass": "^1.3.0",
|
||||
"webpack": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"node-sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"fibers": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"klona": "^2.0.4",
|
||||
"neo-async": "^2.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.13.16",
|
||||
"@babel/core": "^7.14.0",
|
||||
"@babel/preset-env": "^7.14.1",
|
||||
"@commitlint/cli": "^12.1.1",
|
||||
"@commitlint/config-conventional": "^12.1.1",
|
||||
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
|
||||
"babel-jest": "^26.6.3",
|
||||
"bootstrap": "^4.5.3",
|
||||
"bootstrap-sass": "^3.4.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^5.2.4",
|
||||
"del": "^6.0.0",
|
||||
"del-cli": "^3.0.1",
|
||||
"enhanced-resolve": "^5.8.0",
|
||||
"eslint": "^7.26.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"fibers": "^5.0.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"foundation-sites": "^6.6.3",
|
||||
"husky": "^6.0.0",
|
||||
"jest": "^26.6.3",
|
||||
"lint-staged": "^11.0.0",
|
||||
"material-components-web": "^8.0.0",
|
||||
"memfs": "^3.2.2",
|
||||
"node-sass": "^6.0.0",
|
||||
"node-sass-glob-importer": "^5.3.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.3.0",
|
||||
"sass": "^1.32.12",
|
||||
"semver": "^7.3.5",
|
||||
"standard-version": "^9.3.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"webpack": "^5.36.2"
|
||||
},
|
||||
"keywords": [
|
||||
"sass",
|
||||
"libsass",
|
||||
"webpack",
|
||||
"loader"
|
||||
]
|
||||
}
|
Reference in New Issue
Block a user