vite stylus 全局变量如何引入
时间: 2024-08-15 18:03:36 浏览: 123
在Vite项目中使用Stylus作为样式语言时,如果你想要设置全局变量,可以按照以下步骤操作:
1. 首先,安装所需的依赖:
```
npm install --save-dev stylus-loader node-sass autoprefixer --save dev
```
2. 在`.vite/webpack.config.js`文件中配置Stylus loader。确保它能处理全局变量。添加以下内容到`build`部分的`css`配置里:
```javascript
module.exports = {
// ...
css: {
postcss: {
plugins: [autoprefixer],
},
compilerOptions: {
import: ['node_modules/stylus/lib/functions', 'path/to/your/global-variables.styl'],
},
},
};
```
这里,`import`选项指定了两个路径,一个是Stylus自带的函数库,另一个是你自定义的全局变量文件。
3. 创建一个名为`global-variables.styl`的文件(替换`path/to/your/global-variables.styl`),并在其中定义你的全局变量,例如:
```stylus
$primary-color: #007BFF;
$secondary-color: #6C757D;
// 然后你可以在整个项目的 styl 文件中引用这些变量,比如
body {
background-color: $primary-color;
}
```
4. 现在,所有的Stylus文件都能访问并使用你在`global-variables.styl`中定义的全局变量了。
阅读全文