chatgpt微信小程序智能AI聊天,后台为JAVA程序 全网开源最强商业化程序.zip

<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] [![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 ``` or ```console yarn add -D sass-loader sass webpack ``` or ```console pnpm add -D sass-loader sass webpack ``` `sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass), [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below) or [Sass Embedded](https://github.com/sass/embedded-host-node). This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use. > **Note** > > We highly recommend using [Dart Sass](https://github.com/sass/dart-sass). > **Warning** > > [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). > **Warning** > > [Sass Embedded](https://github.com/sass/embedded-host-node) is experimental and in `beta`, therefore some features may not work 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 - **[`implementation`](#implementation)** - **[`sassOptions`](#sassoptions)** - **[`sourceMap`](#sourcemap)** - **[`additionalData`](#additionaldata)** - **[`webpackImporter`](#webpackimporter)** - **[`warnRuleAsWarning`](#warnruleaswarning)** ### `implementation` Type: ```ts type implementation = object | string; ``` 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. #### `object` 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"), }, }, ], }, ], }, }; ``` #### `string` 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.resolve("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). > **Warning** > > Fibers is not compatible with `Node.js` v16.0.0 or later. Unfortunately, v8 commit [dacc2fee0f](https://github.com/v8/v8/commit/dacc2fee0f815823782a7e432c79c2a7767a4765) is a breaking change and workarounds are non-trivial. ([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.