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

Question

我不能在我的项目中包含一个手写插件，每个版本的代码差别很大，以至于我无法尝试所有的东西。

以下是我目前的版本：

"nib"："^1.1.2"，

"vue"："^2.5.16“

“手写笔”："^0.54.5"，

“手写加载程序”："^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.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/样式/nibFixes.styl文件中

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

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