React 样式组件的设置答案

【问题标题】：Setup for React styled componentsReact 样式组件的设置
【发布时间】：2019-02-07 06:07:41
【问题描述】：

我无法让样式化的组件工作；一定是我的设置中的东西。这是组件：

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  margin-top: 100px;
`;

const TestComponent = () => (
  <Wrapper>
    TEST
  </Wrapper>
);

export default TestComponent;

渲染时它只是一个 <div> 和一个时髦的 class 但没有样式。

我的package.json：

{
  "name": "Lolland",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "axios": "^0.18.0",
    "babel-plugin-styled-components": "^1.6.0",
    "babel-runtime": "^6.26.0",
    "history": "^4.7.2",
    "mobx": "^5.1.0",
    "mobx-react": "^5.2.5",
    "mobx-react-router": "^4.0.4",
    "mobx-rest": "^2.2.5",
    "mobx-rest-axios-adapter": "^2.1.1",
    "prop-types": "^15.6.2",
    "query-string": "^6.1.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router": "^4.3.1",
    "react-spinners": "^0.4.5",
    "recompose": "^0.30.0",
    "styled-components": "^3.4.5"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-styled-components": "^1.6.0",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  }
}

我的.babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime", "emotion", "babel-plugin-styled-components"]
}

还有我的webpack.config.js：

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
  ],
};

【问题讨论】：

为什么要把emotion添加到你的babelrc？据我所知，您没有使用情感，并且您的 package.json 中也没有该插件。如果您的 node_modules 中确实有情感插件，则可能是您的问题的原因。
我有emotion，因为它被npmjs.com/package/react-spinners 使用，我在未显示的代码中使用了它。但是，删除它解决了这个问题，所以我会找到其他一些微调器。谢谢！如果您将其写为答案，我会接受
事实上，只需将emotion 移动到plugins 的末尾就足够了

标签： reactjs npm webpack babeljs styled-components

【解决方案1】：

我们一起在 cmets 中找到了答案，但对于那些在未来遇到困难的人来说：

插件的顺序很重要。在 emotion 之前放置 styled-components 可以解决冲突，因为情感插件会解析导入声明并在此基础上发挥作用。请参阅code here。另一方面，styled-components 插件解析 package name，但仍然使用导入声明，因此冲突。

【讨论】：