尝试使用iView在我的Vue项目中使用主题时编译错误

Question

我试图在我的Vue项目中改变iView的主题。我遵循了在这个链接中找到的步骤：

https://www.iviewui.com/docs/guide/theme-en

我在主项目文件夹中创建了一个名为my-theme的文件夹。在其中，我有一个名为index.less的文件，它包含我的主题的样式。我还使用以下命令安装了更少的加载程序

npm install less-loader --save-dev

然后，我将主题导入到我的main.js文件中，如下所示：

import iView from 'iview';
import '../my-theme/index.less';

Vue.use(iView);

但是，当我试图加载我的项目时，我会得到以下错误：

Failed to compile.

./my-theme/index.less (./node_modules/css-loader??ref--10-oneOf-3-1!./node_modules/postcss-loader/src??ref--10-oneOf-3-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-3-3!./my-theme/index.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/myusername/myapp/node_modules/less-loader/dist/index.js:8:36)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/myusername/myapp/node_modules/less-loader/dist/cjs.js:3:18)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)

https://pastebin.com/wRSP65bX

我怎样才能解决这个问题？谢谢你的帮助。

更新

我还使用less安装了npm install less --save。现在我得到了这个错误：

Failed to compile.

./my-theme/index.less (./node_modules/css-loader??ref--10-oneOf-3-1!./node_modules/postcss-loader/src??ref--10-oneOf-3-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-3-3!./my-theme/index.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /Users/myusername/myapp/node_modules/iview/src/styles/color/bezierEasing.less (line 110, column 0)

Answer 1

您需要在loaderOptions中启用javascript vue.config.js

如果项目的根文件夹中没有vue.config.js文件，那么让我们创建这个文件并粘贴以下代码：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
};

否则，只需将此代码放到vue.config.js文件中即可。您的文件现在看起来如下所示：

module.exports = {
    ...// other options
    ...
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
    ...
    ...
};