coderwhy新课Vue3+TypeScript课堂资料

<div align="center"> <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] [![cover][cover]][cover-url] [![chat][chat]][chat-url] [![size][size]][size-url] # stylus-loader A Stylus loader for webpack. Compiles Styl to CSS. ## Getting Started To begin, you'll need to install `stylus` and `stylus-loader`: ```console $ npm install stylus stylus-loader --save-dev ``` Then add the loader to your `webpack` config. For example: **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.styl$/, loader: "stylus-loader", // compiles Styl to CSS }, ], }, }; ``` And run `webpack` via your preferred method. ## Options | Name | Type | Default | Description | | :---------------------------------------: | :------------------: | :----------------: | :------------------------------------------------------- | | **[`stylusOptions`](#stylusOptions)** | `{Object\|Function}` | `{}` | Options for Stylus. | | **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps. | | **[`webpackImporter`](#webpackimporter)** | `{Boolean}` | `true` | Enables/Disables the default Webpack importer. | | **[`additionalData`](#additionalData)** | `{String\|Function}` | `undefined` | Prepends/Appends `Stylus` code to the actual entry file. | ### `stylusOptions` Type: `Object|Function` Default: `{}` You can pass any Stylus specific options to the `stylus-loader` through the `stylusOptions` property in the [loader options](https://webpack.js.org/configuration/module/#rule-options-rule-query). See the [Stylus documentation](https://stylus-lang.com/docs/js.html). Options in dash-case should use camelCase. #### `Object` Use an object to pass options through to Stylus. **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.styl$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "stylus-loader", options: { stylusOptions: { /** * Specify Stylus plugins to use. Plugins may be passed as * strings instead of importing them in your Webpack config. * * @type {(string|Function)[]} * @default [] */ use: ["nib"], /** * Add path(s) to the import lookup paths. * * @type {string[]} * @default [] */ include: [path.join(__dirname, "src/styl/config")], /** * Import the specified Stylus files/paths. * * @type {string[]} * @default [] */ import: ["nib", path.join(__dirname, "src/styl/mixins")], /** * Define Stylus variables or functions. * * @type {Array|Object} * @default {} */ // Array is the recommended syntax: [key, value, raw] define: [ ["$development", process.env.NODE_ENV === "development"], ["rawVar", 42, true], ], // Object is deprecated syntax (there is no possibility to specify "raw') // define: { // $development: process.env.NODE_ENV === 'development', // rawVar: 42, // }, /** * Include regular CSS on @import. * * @type {boolean} * @default false */ includeCSS: false, /** * Resolve relative url()'s inside imported files. * * @see https://stylus-lang.com/docs/js.html#stylusresolveroptions * * @type {boolean|Object} * @default { nocheck: true } */ resolveURL: true, // resolveURL: { nocheck: true }, /** * Emits comments in the generated CSS indicating the corresponding Stylus line. * * @see https://stylus-lang.com/docs/executable.html * * @type {boolean} * @default false */ lineNumbers: true, /** * Move @import and @charset to the top. * * @see https://stylus-lang.com/docs/executable.html * * @type {boolean} * @default false */ hoistAtrules: true, /** * Compress CSS output. * In the "production" mode is `true` by default * * @see https://stylus-lang.com/docs/executable.html * * @type {boolean} * @default false */ compress: true, }, }, }, ], }, ], }, }; ``` #### `Function` Allows setting the options passed through to Stylus based off of the loader context. ```js module.exports = { module: { rules: [ { test: /\.styl/, use: [ "style-loader", "css-loader", { loader: "stylus-loader", options: { stylusOptions: (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.styl") { return { paths: ["absolute/path/c", "absolute/path/d"], }; } return { paths: ["absolute/path/a", "absolute/path/b"], }; }, }, }, ], }, ], }, }; ``` ### `sourceMap` Type: `Boolean` **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.styl$/i, use: [ "style-loader", { loader: "css-loader", options: { sourceMap: true, }, }, { loader: "stylus-loader", options: { sourceMap: true, }, }, ], }, ], }, }; ``` ### `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. **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.styl/i, use: [ "style-loader", "css-loader", { loader: "stylus-loader", options: { webpackImporter: false, }, }, ], }, ], }, }; ``` ### `additionalData` Type: `String|Function` Default: `undefined` Prepends `Stylus` code before the actual entry file. In this case, the `stylus-l