如何使用 webpack 模板在 Vue 2 项目中为 Stylus 应用插件
How to apply plugin for Stylus in Vue 2 project with webpack template
我有一个 Vue2 项目 Webpack template and I am using Stylus 作为 CSS 预处理器(stylus,stylus-loader 已经安装并工作)。
我找不到像 rupture 这样的 Stylus 应用插件的方法。
我尝试修改 build/utils.js
中的选项,如下所示:
stylus: generateLoaders('stylus', {use: [require('rupture')()]}),
styl: generateLoaders('stylus', {use: [require('rupture')()]})
还尝试从 App.vue
中的 <style></style>
标签 import
中断,例如:
@import 'rupture/rupture/index.styl' // also 'rupture/index.styl'
也尝试从 main.js
导入它,但到目前为止没有任何效果。
提前致谢!
好吧,我想出了一个解决方案,它利用 Stylus 的 import
选项,如下所示:
stylus: generateLoaders('stylus', {
// unfortunately `use` option throws error
// use: [require('nib')(), require('rupture')()]
// import to the rescue
import: [
'~nib/index.styl',
'~rupture/rupture/index.styl',
path.resolve(__dirname, '../src/styles/cfg.styl')
]
}),
注意:如果import
选项中提供的任何路径不正确,服务器会静静地陷入挂起状态并且不会启动- 不会抛出任何错误。
我有一个 Vue2 项目 Webpack template and I am using Stylus 作为 CSS 预处理器(stylus,stylus-loader 已经安装并工作)。
我找不到像 rupture 这样的 Stylus 应用插件的方法。
我尝试修改 build/utils.js
中的选项,如下所示:
stylus: generateLoaders('stylus', {use: [require('rupture')()]}),
styl: generateLoaders('stylus', {use: [require('rupture')()]})
还尝试从 App.vue
中的 <style></style>
标签 import
中断,例如:
@import 'rupture/rupture/index.styl' // also 'rupture/index.styl'
也尝试从 main.js
导入它,但到目前为止没有任何效果。
提前致谢!
好吧,我想出了一个解决方案,它利用 Stylus 的 import
选项,如下所示:
stylus: generateLoaders('stylus', {
// unfortunately `use` option throws error
// use: [require('nib')(), require('rupture')()]
// import to the rescue
import: [
'~nib/index.styl',
'~rupture/rupture/index.styl',
path.resolve(__dirname, '../src/styles/cfg.styl')
]
}),
注意:如果import
选项中提供的任何路径不正确,服务器会静静地陷入挂起状态并且不会启动- 不会抛出任何错误。