ant更改主题色报错Inline JavaScript is not enabled. Is it set in your options? vue ant主题色更改 vue-cli3

港控/mmm° 2021-07-24 22:10 552阅读 0赞

*  **问题：使用vue-cli3更改ant的主题色时候报错：Inline JavaScript is not enabled. Is it set in your options?**
 *  **原因：我的问题是less-loader依赖包的版本为5.0.0，而官方要求必须是6.0.0；**
 *  ![List item][]

ERROR  Failed to compile with 1 errors                                                                         16:02:25
    
     error  in ./node_modules/ant-design-vue/dist/antd.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 C:\Users\***\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)
    
     @ ./node_modules/ant-design-vue/dist/antd.less 4:14-188 14:3-18:5 15:22-196
     @ ./src/main.js
     @ multi (webpack)-dev-server/client?http://172.18.17.39:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

**问题点排查**

*  **是否使用了less和less-loader**：如果项目使用的是scss/sass预处理器，则需要安装less和less-loader，vue-cli3已经在底层预留了less配置，因此无需查找文件添加配置

cnpm install less less-loader --save-dev

*  样式不生效问题：**设置好需要重新启动**
 *  less 的样式被 css 的样式覆盖：如果你在使用 babel-plugin-import 的 style 配置来引入样式，需要将配置值从 **‘css’ 改为 true**，这样会引入 less 文件。
 *  如果在marn.js中你是通过 ‘ant-design-vue/dist/antd.css’ 引入样式的，改为 **'ant-design-vue/dist/antd.less’**
 *  在vue cli 3 中定制主题：项目根目录下新建文件**vue.config.js**  
    **注意：less-loader依赖包的版本一定要是6.0.0或以上**

module.exports = { 
    //vue-cli3修改ant的主题色官网配置 vue.config.js for less-loader@6.0.0 ||||||||注意less-loader依赖包的版本一定要是6.0.0或以上|||||||
      css: { 
        loaderOptions: { 
          less: { 
            lessOptions: { 
              modifyVars: { 
                'primary-color': '#ff1f', // 全局主色 #1890ff
                'link-color': '#1890ff', // 链接色
                'success-color': '#52c41a', // 成功色
                'warning-color': '#faad14', // 警告色
                'error-color': '#f5222d', // 错误色
                'font-size-base': '14px', // 主字号
                'heading-color': 'rgba(0, 0, 0, 0.85)', // 标题色
                'text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
                'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
                'disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
                'border-radius-base': '4px', // 组件/浮层圆角
                'border-color-base': '#d9d9d9', // 边框色
                'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
              },
              javascriptEnabled: true,
            },
          },
        },
      }
    }

*  其他webpack 和 vue cli 2 中定制主题，可看官网[ant自定义主题][ant]
 *  亲测有用，希望帮助到你！

[List item]: /images/20210724/9fcc11609a98433fa85d93edf2666f01.png
[ant]: https://www.antdv.com/docs/vue/customize-theme-cn/#%E5%9C%A8-vue-cli-3-%E4%B8%AD%E5%AE%9A%E5%88%B6%E4%B8%BB%E9%A2%98