Can not load css in antd

[Dcatfly]

version:

[email protected], [email protected], [email protected], [email protected]

code:

  // {
  //   loader: "babel-loader",
  //   query: {
  //     presets: ["env", "react", "stage-0"],
  //     plugins:[
  //       ["import", { libraryName: "antd", style: "css" }],
  //       ["transform-runtime"],
  //     ],
  //   },
  // },
  {
    loader: "ts-loader",
    options: {
      // transpileOnly: true,
      happyPackMode: true,
      //这个组件暂时无效 不晓得是不是happypack的关系 而且纯用ts编译直出会导致一些问题 所以我还是选择babel
      getCustomTransformers: () => ({
        before: [ transformerFactory({
          libraryName: 'antd',
          // libraryDirectory: 'es',
          style: 'css',
        }) ]
      }),
    }
  }

describe:

Babel's import configuration is OK, replaced by TS import configuration will die, the compiler can pass but did not introduce css.

[DGolubets]

Any update? I have the same problem.

[Brooooooklyn]

Could you please provide your webpack.config and tsconfig.json ?

[DGolubets]

@Brooooooklyn sorry, it was a problem on my side. ts-import-plugin did it's job :)

[Brooooooklyn]

Set module in tsconfig.json to esnext is a very important step when you are using ts-import-plugin within webpack.

//tsconfig.json
{
  ...
  "module": "esnext",
  ...
}

[AmazingTurtle]

According to https://github.com/TypeStrong/ts-loader#getcustomtransformers-----before-transformerfactory-after-transformerfactory--

You can also pass a path string to locate a js module file which exports the function described above, this useful especially in happyPackMode. (Because forked proccess cannot serialize functions see more at related issue)

I did this. Basically works, BUT I'm getting this one: #58

In your webpack loader config do this

{
    loader: 'ts-loader',
    options: {
        happyPackMode: true,
        getCustomTransformers: __dirname + '\\tsCustomTransformer.js'
    }
}

and in tsCustomTransformer.js

const tsImportPluginFactory = require('ts-import-plugin');
module.exports = () => ({
    before: [
        tsImportPluginFactory({
            style: true
        })
    ]
});

[SunShinewyf]

I have the same problem, any solution?

[Brooooooklyn]

@SunShinewyf Hey, could you please provide your loader config in you webpack config?

And your tsconfig.json

[SunShinewyf]

webpack config

{
            loader: "ts-loader",
            options: {
              happyPackMode: true,
              transpileOnly: true,
              getCustomTransformers: () => ({
                before: [TsImportPluginFactory({
                  libraryName: 'antd',
                  libraryDirectory: 'es',
                  style: true
                })]
              }),
              compilerOptions: {
                module: 'es2015'
              }
            },
          },

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "ESNext",
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "lib": ["es2015", "dom"],
        "allowJs": false,
        "strictNullChecks": true,
        "moduleResolution": "node",
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "declaration": false,
        "resolveJsonModule": true
        // "declarationDir": "./lib"
    },
    "include": [
        "./src/**/*",
        "desc.d.ts"
    ]
}

[Brooooooklyn]

happyPackMode: true are you using the ts-loader with happypack?

You should follow this to configure your ts-loader which using with happypack: #36 (comment)