stylus-loader
免责声明：stylus-loader 是由社区成员维护的第三方包，它可能没有与 webpack 相同的支持、安全策略或许可证，并且它不受 webpack 维护。
适用于 webpack 的 Stylus 加载器。将 Styl 编译为 CSS。
入门
首先，你需要安装 stylus 和 stylus-loader
npm install stylus stylus-loader --save-dev
或
yarn add -D stylus stylus-loader
或
pnpm add -D stylus stylus-loader
然后将加载器添加到你的 webpack 配置中。例如
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
loader: "stylus-loader", // compiles Styl to CSS
},
],
},
};并通过你首选的方法运行 webpack。
选项
stylusOptions
类型
type stylusOptions =
| {
use: Array<string | Function>;
include: string;
import: string;
define: Array;
includeCSS: false;
resolveURL: boolean | Object;
lineNumbers: boolean;
hoistAtrules: boolean;
compress: boolean;
}
| (loaderContext: LoaderContext) => Array<string>;默认值：{}
你可以通过 加载器选项 中的 stylusOptions 属性将任何 Stylus 特定选项传递给 stylus-loader。请参阅 Stylus 文档。连字符分隔的选项应使用驼峰命名法。
object
使用一个对象将选项传递给 Stylus。
webpack.config.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.org.cn/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.org.cn/docs/executable.html
*
* @type {boolean}
* @default false
*/
lineNumbers: true,
/**
* Move @import and @charset to the top.
*
* @see https://stylus.org.cn/docs/executable.html
*
* @type {boolean}
* @default false
*/
hoistAtrules: true,
/**
* Compress CSS output.
* In the "production" mode is `true` by default
*
* @see https://stylus.org.cn/docs/executable.html
*
* @type {boolean}
* @default false
*/
compress: true,
},
},
},
],
},
],
},
};function
允许根据加载器上下文设置传递给 Stylus 的选项。
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.cn/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 sourceMap = boolean;webpack.config.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 webpackImporter = boolean;默认值：true
启用/禁用默认的 Webpack 导入器。
在某些情况下，这可以提高性能。谨慎使用，因为别名和以 ~ 开头的 @import at 规则将不起作用。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl/i,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
webpackImporter: false,
},
},
],
},
],
},
};additionalData
类型
type additionalData =
| string
| (
content: string | Buffer,
loaderContext: LoaderContext,
meta: any
) => string;默认值：undefined
在实际入口文件之前添加 Stylus 代码。在这种情况下，stylus-loader 不会覆盖源代码，而只是添加入口内容。
当 Stylus 变量依赖于环境时，这尤其有用
注意
由于你正在注入代码，这将破坏入口文件中的源映射。通常有比这更简单的解决方案，例如多个 Stylus 入口文件。
string
module.exports = {
module: {
rules: [
{
test: /\.styl/,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
additionalData: `@env: ${process.env.NODE_ENV};`,
},
},
],
},
],
},
};function
同步
module.exports = {
module: {
rules: [
{
test: /\.styl/,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
additionalData: (content, loaderContext) => {
// More information about available properties https://webpack.js.cn/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (relativePath === "styles/foo.styl") {
return "value = 100px" + content;
}
return "value 200px" + content;
},
},
},
],
},
],
},
};异步
module.exports = {
module: {
rules: [
{
test: /\.styl/,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
additionalData: async (content, loaderContext) => {
// More information about available properties https://webpack.js.cn/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (relativePath === "styles/foo.styl") {
return "value = 100px" + content;
}
return "value 200px" + content;
},
},
},
],
},
],
},
};implementation
类型
type implementation = Function | string;特殊的 implementation 选项决定使用哪个 Stylus 实现。覆盖本地安装的 stylus 的 peerDependency 版本。
function
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl/i,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
implementation: require("stylus"),
},
},
],
},
],
},
};string
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl/i,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
implementation: require.resolve("stylus"),
},
},
],
},
],
},
};示例
常规用法
将 stylus-loader 与 css-loader 和 style-loader 链接起来，以立即将所有样式应用到 DOM。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "stylus-loader", // compiles Stylus to CSS
},
],
},
],
},
};源映射
要为 CSS 启用源映射，你需要在加载器的选项中传递 sourceMap 属性。如果不传递，加载器将遵循 webpack 源映射的设置，在 devtool 中设置。
webpack.config.js
module.exports = {
devtool: "source-map", // any "source-map"-like devtool is possible
module: {
rules: [
{
test: /\.styl$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "stylus-loader",
options: {
sourceMap: true,
},
},
],
},
],
},
};在 stylus 中使用 nib
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "stylus-loader", // compiles Stylus to CSS
options: {
stylusOptions: {
use: [require("nib")()],
import: ["nib"],
},
},
},
],
},
],
},
};导入 JSON 文件
Stylus 不提供 json 函数中的解析功能。因此，webpack 解析器不适用于 .json 文件。使用 stylus 解析器。
index.styl
// Suppose the file is located here `node_modules/vars/vars.json`
json('vars.json')
@media queries-small
body
display nope
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
stylusOptions: {
// Specify the path. where to find files
paths: ["node_modules/vars"],
},
},
},
],
},
],
},
};在生产中
通常，建议在生产中使用 MiniCssExtractPlugin 将样式表提取到一个专用文件中。这样，您的样式就不依赖于 JavaScript 了。
webpack 解析器
Webpack 提供了一个 高级机制来解析文件。stylus-loader 在处理查询时应用 webpack 解析器。因此，您可以从 node_modules 导入 Stylus 模块。
@import 'bootstrap-styl/bootstrap/index.styl';
使用 ~ 已弃用，可以从您的代码中删除（我们建议这样做），但出于历史原因，我们仍然支持它。为什么您可以删除它？该加载器将首先尝试将 @import/@require 解析为相对路径，如果无法解析，该加载器将尝试在 node_modules 中解析 @import/@require。只需在它们前面加上一个 ~，告诉 webpack 查找 modules 即可。
@import "~bootstrap-styl/bootstrap/index.styl";
仅在前面加上 ~ 非常重要，因为 ~/ 解析到主目录。Webpack 需要区分 bootstrap 和 ~bootstrap，因为 CSS 和 Styl 文件没有用于导入相对文件的特殊语法。编写 @import "file" 与 @import "./file"; 相同
Stylus 解析器
如果您指定 paths 选项，将在给定的 paths 中搜索模块。这是 Stylus 的默认行为。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.styl/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "stylus-loader",
options: {
stylusOptions: {
paths: [path.resolve(__dirname, "node_modules")],
},
},
},
],
},
],
},
};提取样式表
使用 webpack 捆绑 CSS 有一些不错的优势，例如使用哈希 URL 引用图像和字体，或在开发中进行 热模块替换。另一方面，在生产中，最好不要根据 JS 执行来应用样式表。渲染可能会延迟，甚至可能会看到 FOUC。因此，在最终的生产版本中将它们作为单独的文件通常仍然更好。
有两种方法可以从捆绑包中提取样式表
extract-loader（更简单，但专门针对 css-loader 的输出）- MiniCssExtractPlugin（更复杂，但适用于所有用例）
贡献
如果您还没有这样做，请花点时间阅读我们的贡献指南。
许可证
« 上一页
style-loader