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

Question

我不能在我的项目中包含手写笔插件，一个版本与另一个版本的代码差异很大，以至于我无法尝试一切。

以下是我目前拥有的版本：

"nib": "^1.1.2",

"vue": "^2.5.16",

"stylus": "^0.54.5",

"stylus-loader": "^3.0.2",

// vue.config.js

const nib = require('nib');

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

有人成功了吗？

我想知道怎么做以及为什么我做的不起作用，谢谢。

Answer 1

要使用 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'
  ]
}

Answer 2

~~一旦我使用 vue-cli 这样安装了破裂：~~

~~const rupture = require('rupture') module.exports = { configureWebpack: { css: { loaderOptions: { stylus: { use: [rupture()] } } } } }~~

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

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

Answer 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

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

Include a stylus plugin in Vue.js project

vue.js

webpack

plugins

nib

stylus