Vuepress: Import less error, how should I modify the webpack configuration?

[cnguu]

I try to import an antd less file:

@import "~ant-design-vue/dist/antd.less";

But I got a problem:

Uncaught Error: 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 D:\workspace\personal\vuepress-theme-yur\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)
    at eval (cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/less-loader/dist/cjs.js!../vuepress-theme-yur/styles/index.less:1)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/less-loader/dist/cjs.js!../vuepress-theme-yur/styles/index.less (app.js:8050)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (index.less?5c7e:4)
    at Object.../vuepress-theme-yur/styles/index.less (app.js:932)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (enhanceApp.js?91c3:1)
    at Module.../vuepress-theme-yur/enhanceApp.js (app.js:921)

[cnguu]

Then, I try to use webpack-chain, but it doesn't work

    chainWebpack(config, isServer) {
        config.module
            .rule('less')
            .oneOf('modules')
            .use('less-loader')
            .loader('less-loader')
            .tap(options => {
                options.javascriptEnabled = true
                return options
            })
    }

Error:

error @vuepress/internal-theme-entry-file apply chainWebpack failed.
TypeError: Cannot set property 'javascriptEnabled' of undefined
    at config.module.rule.oneOf.use.loader.tap.options (C:\workspace\vuepress-theme-yur\index.js:12:43)
    at Object.tap (C:\workspace\vuepress-blog\node_modules\webpack-chain\src\Use.js:14:20)
    at chainWebpack (C:\workspace\vuepress-theme-yur\index.js:11:14)
    at Option.syncApply (C:\workspace\vuepress-blog\node_modules\@vuepress\core\lib\node\plugin-api\abstract\Option.js:110:15)
    at PluginAPI.applySyncOption (C:\workspace\vuepress-blog\node_modules\@vuepress\core\lib\node\plugin-api\index.js:257:26)
    at createClientConfig (C:\workspace\vuepress-blog\node_modules\@vuepress\core\lib\node\webpack\createClientConfig.js:75:17)
    at DevProcess.prepareWebpackConfig (C:\workspace\vuepress-blog\node_modules\@vuepress\core\lib\node\dev\index.js:156:18)
    at DevProcess.process (C:\workspace\vuepress-blog\node_modules\@vuepress\core\lib\node\dev\index.js:37:10)
    at process._tickCallback (internal/process/next_tick.js:68:7)

How should I modify the webpack configuration?

[meteorlxy]

  .oneOf('normal')

[cnguu]

  .oneOf('normal')

It doesn't work too:

    chainWebpack(config, isServer) {
        config.module
            .rule('less')
            .oneOf('normal')
            .use('less-loader')
            .loader('less-loader')
            .tap(options => {
                options.javascriptEnabled = true
                return options
            })
    }

Get the same error message:

error @vuepress/internal-theme-entry-file apply chainWebpack failed.
TypeError: Cannot set property 'javascriptEnabled' of undefined

Then I modified it to the code:

    chainWebpack(config, isServer) {
        config.module
            .rule('less')
            .oneOf('normal')
            .use('less-loader')
            .loader('less-loader')
            .tap(options => Object.assign({}, options, {
                javascriptEnabled: true,
            }));
    },

Although no error was reported, the style was not used.

I just want to add an option, it's too hard.

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

This is the version I am using now:

• "vuepress": "^1.1.0"
• "ant-design-vue": "^1.3.16"
• "less": "^3.9.0"
• "less-loader": "^4.1.0"

[meteorlxy]

It's easy in fact. Two solutions:

1. Use less option (simpler):

// .vuepress/config.js

module.exports = {
  less: {
    javascriptEnabled: true,
  },
}

1. Use chainWebpack option like what you were trying to do:

// .vuepress/config.js

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('less')
        .oneOf('normal')
          .use('less-loader')
            .options({ javascriptEnabled: true })
            .end()
          .end()
        .oneOf('modules')
          .use('less-loader')
            .options({ javascriptEnabled: true })
  },
}

[cnguu]

It's easy in fact. Two solutions:

1. Use less option (simpler):

// .vuepress/config.js

module.exports = {
  less: {
    javascriptEnabled: true,
  },
}

1. Use chainWebpack option like what you were trying to do:

// .vuepress/config.js

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('less')
        .oneOf('normal')
          .use('less-loader')
            .options({ javascriptEnabled: true })
            .end()
          .end()
        .oneOf('modules')
          .use('less-loader')
            .options({ javascriptEnabled: true })
  },
}

It work! Thanks!

[kefranabg]

Thanks @meteorlxy !