SyntaxError:/src/components/shared/X.css:意外的令牌(1:0)Mocha Css

时间:2017-06-15 11:01:27

标签: javascript reactjs testing mocha css-modules

我有一个奇怪的错误imo,我真的不明白为什么我现在看到这个,因为我一直在使用这些测试没有任何问题,我离开它一个月左右并试图再次运行并看到以下内容:

错误

npm test

> wekindred.com@0.0.1 test /var/www
> BABEL_ENV=test nyc --require babel-register mocha --watch 'test/**/*.spec.js'


SyntaxError: /var/www/src/components/shared/logo/_Logo.css: Unexpected token (1:0)
> 1 | .logo {
    | ^
  2 |   font-size: 5rem;
  3 | }

的package.json

{
  "main": "./src/index.js",
  "scripts": {        "test": "BABEL_ENV=test nyc --require babel-register mocha --watch tap 'test/**/*.spec.js'",
  },
  "dependencies": {
    .....
    "enzyme": "^2.8.0",
    "react": "^15.5.0",
    "react-addons-test-utils": "^15.5.0",
    "react-css-modules": "^4.1.0",
    "react-dom": "^15.5.0",
    "react-redux": "^5.0.3",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.0.0",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-tap-event-plugin": "^2.0.1",
    "react-test-renderer": "^15.5.4",
    "webpack": "^2.2.1"
    .....
  },
  "devDependencies": {
    .....
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "chai": "^3.5.0",
    "css-loader": "^0.27.3",
    "css-modules-require-hook": "^4.0.6",
    "mocha": "^3.2.0",
    "node-sass": "^4.5.2",
    "nyc": "^10.2.0",
    "path": "^0.12.7",
    "postcss-fontpath": "^0.3.0",
    "postcss-load-config": "^1.2.0",
    "postcss-loader": "^1.3.3",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "postcss-strip-inline-comments": "^0.1.5",
    "precss": "^1.4.0",
    "style-loader": "^0.16.0",
    "svg-react-loader": "^0.3.7",
    "url-loader": "^0.5.8",
    "webpack-config": "^7.0.0",
    .....
  },
  "nyc": {
    "all": true,
    "include": [
      "src/**/*.js"
    ],
    "cache": true,
    "require": [
      "./test/helper/registerBabel.js",
      "./test/helper/setup.js"
    ]
  }
}

registerBabel.js

require('babel-register')({
    ignore: /node_modules\/(?!ProjectB)/
});

setup.js(mocha helper)

hook({
  extensions: ['.css'],
  generateScopedName: '[local]',
  preprocessCss: (data, filename) =>
    sass.renderSync({
      data,
      file: filename,
      importer: (url) => {
        if (url.indexOf('~') === 0) {
          const node_modules_path = path.resolve(__dirname, '../..', 'node_modules');

          return {
            file: path.join(node_modules_path, url.replace('~', ''))
          };
        }

        return {file: url};
      }
    }).css
});

babelrcrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-0",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "development/client": {
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    },
    "test": {
      "presets": [
        ["es2015"],
        "stage-0",
        "react"
      ],
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    }
  }
}

**使用_logo.css

的组件
import React from 'react';
import logo from './_Logo.css';
import * as font from '../font/fontello.css';

class Logo extends React.Component {
    render() {
        return (
            <div className={logo.logo +' '+font['icon-logo']}></div>
        );
    }
};

export default Logo;

_Logo.css

.logo {
  font-size: 5rem;
}

0 个答案:

没有答案