在 Vue.js 项目中包含一个手写笔插件

Posted 2023-02-27

【中文标题】在 Vue.js 项目中包含一个手写笔插件

【英文标题】：Include a stylus plugin in Vue.js project

【发布时间】：2019-09-06 12:43:12

【问题描述】：

我不能在我的项目中包含手写笔插件，代码从一个版本到另一个版本差异很大，以至于我在尝试所有东西时都迷失了方向。

这是我目前拥有的版本：

“笔尖”：“^1.1.2”，

“vue”：“^2.5.16”，

“手写笔”：“^0.54.5”，

"stylus-loader": "^3.0.2",

// vue.config.js

const nib = require('nib');

module.exports = 
    configureWebpack: 
        stylus: 
            use: [nib()],
            import: ['nib'],
        ,
    ,
;

有人成功了吗？

我想了解如何操作以及为什么我的操作不起作用，谢谢。

【参考方案1】：

一旦我使用 vue-cli 以这种方式安装了破裂：

const rupture = require('rupture')

module.exports = 
  configureWebpack: 
    css: 
      loaderOptions: 
        stylus: 
          use: [rupture()]
        
      
    
  

我找到了安装笔尖的正确方法：

module.exports = 
  css: 
    loaderOptions: 
      stylus: 
        use: [require('nib')()],
        import: ['~nib/lib/nib/index.styl']
      
    
  

【讨论】：

我收到一个错误：` ERROR WebpackOptionsValidationError: Invalid configuration object。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - 配置具有未知属性“css”。这些属性是有效的：object amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization ?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, ... `

@Jimmy.D 我更新了我的答案，看看它是否对你有帮助。

有效！谢谢你。但是由于 Vuetify，我在控制台中有很多警告：You should write display: flex by final spec instead of display: box

我认为是关于这个问题：github.com/stylus/nib/issues/312

【参考方案2】：

要使用 Stylus，您需要在 webpack 配置中配置 css 加载器，将其添加到规则中：

  test: /\.css$/,
  use: [
    'vue-style-loader',
    'css-loader'
  ]

并安装样式加载器：npm install --save-dev css-loader vue-style-loader

然后应该加载 css，您可以在我们的外部资产和单文件组件中进行 css 处理。

使用手写笔的最后一个更改是安装加载程序：npm install --save-dev stylus stylus-loader

并添加一条规则：

  test: /\.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]

【讨论】：

实际上手写笔已经可以在我的项目中使用了。 <style lang="stylus"> .mySelector height 100% width 100% </style>我只想能够使用“nib”插件，无论我做什么我都无法让它在我的.vue文件的“标签中工作.这会给：<style lang="stylus"> .mySelector size 100% </style>

【参考方案3】：

最终解决方案：

在 vue.config.js 文件中

const path = require('path');

module.exports = 
    css: 
        loaderOptions: 
            stylus: 
                use: [
                    require('nib')(),
                ],
                import: [
                    path.resolve(__dirname, './src/styles/nibFixes.styl'),
                    '~nib/lib/nib/index.styl',
                ],
            ,
        ,
    ,
;

在 ./src/styles/nibFixes.styl 文件中

// To fix https://github.com/stylus/nib/issues/312

flex-version = flex
support-for-ie = false
vendor-prefixes = official