egoist / rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.
MIT License
673 stars 214 forks source link

(babel plugin) SyntaxError:Unexpected token #111

Open lzlu opened 6 years ago

lzlu commented 6 years ago

with babel plugins, It throwed a Error when I import less to my js.

[!] (babel plugin) SyntaxError: /Users/**/lib-cli/src/style.less: Unexpected token (1:0)
src/style.less (1:0)
SyntaxError: /Users/**/lib-cli/src/style.less: Unexpected token (1:0)
> 1 | @black: #000000;
    | ^
  2 | .test{
  3 |     color: @black;
  4 |     background: @black;

index.js

import './style.less';

rollup.config.js

export default {
...
plugins:[{
 babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**'
        }),
 postcss({
            extract: `dist/${name}.css`,
            extensions: ['.less'],
            plugins: [],
        }),
}]
...
}

I find a way to resolve this problems by Add babel.include.

export default {
...
plugins:[{
 babel({
            include: 'src/**/*.js',
            runtimeHelpers: true,
            exclude: 'node_modules/**'
        }),
 postcss({
            extract: `dist/${name}.css`,
            extensions: ['.less'],
            plugins: [],
        }),
}]
...
}
shooterRao commented 6 years ago

@lzlu hi, you can use this way to resolve:

export default {
...
plugins:[{
postcss({
            extract: `dist/${name}.css`,
            extensions: ['.less'],
            plugins: [],
        }),
 babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**'
        })
}]
...
}
lzlu commented 6 years ago

@shooterRao TKS,I kown HOW, I just wanna be figure out WHY. And what's different between your config and my mistake one?

ycjcl868 commented 5 years ago

My config:

 plugins: [
    external(),
    url(),
    resolve(),
    postcss({
      minimize: true,
    }),
    babel({
      runtimeHelpers: true,
      babelrc: false,
      presets: [
        "@babel/preset-env",
        "@babel/react",
        "@babel/preset-typescript",
      ],
      plugins: [
        ["import", {
          "libraryName": "antd",
          "style": "css",
        }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ],
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    }),
    commonjs(),
  ]

but

[!] Error: Unexpected token
src/styles.less (1:0)
1: .test {
   ^
2:   display: inline-block;
3:   margin: 2em auto;

1