Vue CLI 3 Example

[btn0s]

Not sure where to start trying to get this to work with vue CLI 3.0 -- But I'm poking around and will update here if I do. Anyone else done this?

[prncc]

I don't have experience with this, so I can't make a more meaningful comment without looking into it, but I do plan on exposing (and slightly modifying) internal utilities so that a static theme.scss file can be easily produced with the plugin. That should make the build non-dynamic, but compatible with a wider range of tools.

[PomeloMan]

My solution is to add the following code in the vue.config.js file. Note: In view of #68, please ensure that the sass-loader version is below 8

module.exports = {
  ......
  configureWebpack: config => {
    config.plugins.push(new AntdScssThemePlugin('./theme.scss'))
  }
  chainWebpack(config) {
    const oneOfs = ['vue-modules', 'vue', 'normal-modules', 'normal']
    oneOfs.forEach(oneOf => {
      config.module.rule('less').oneOf(oneOf)
        .use('less-loader')
        .loader(AntdScssThemePlugin.themify('less-loader').loader)
        .options({
          sourceMap: !isProduction,
          javascriptEnabled: true
        })
      config.module.rule('sass').oneOf(oneOf)
        .use('sass-loader')
        .loader(AntdScssThemePlugin.themify('sass-loader').loader)
        .options({
          sourceMap: !isProduction,
          sassOptions: {
            indentedSyntax: true
          }
        })
      config.module.rule('scss').oneOf(oneOf)
        .use('sass-loader')
        .loader(AntdScssThemePlugin.themify('sass-loader').loader)
        .options({
          sourceMap: !isProduction,
          sassOptions: {
            indentedSyntax: true
          }
        })
    });
  }
  ......
}

[jsliu27]

@PomeloMan Hi, Could you look at this problem for me？ The configuration is the same as yours error in ./node_modules/[email protected]@ant-design-vue/es/style/index.less

Module build failed (from ./node_modules/[email protected]@antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js): Could not compile the SCSS theme file "./theme.scss" for the purpose of variable extraction. This is likely because it contains a Sass error.

@ ./node_modules/[email protected]@ant-design-vue/es/style/index.less 4:14-300 14:3-18:5 15:22-308 @ ./node_modules/[email protected]@ant-design-vue/es/button/style/index.js @ ./src/config/antd-component-import.ts @ ./src/main.ts @ multi ./node_modules/[email protected]@webpack-dev-server/client?http://192.168.31.56:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

[chuyuandu]

seems like that your sass file has syntax error perhaps you use some new syntax that your sass-loader don't supports