手写笔无法与 React 一起使用答案

【问题标题】：Stylus is not working with React手写笔无法与 React 一起使用
【发布时间】：2017-01-15 20:43:44
【问题描述】：

我正在帮助创建一个网络应用程序，我们最近改用手写笔并做出反应。我已经重写了所有的 stylus lang 文件并写了一些反应，但反应根本没有被设计。这是下面的组件。

import React, { Component } from 'react'
import Icon from 'react-component-bytesize-icons'

class CoursesCard extends Component {
    render() {
        const divStyle = {
            backgroundImage : '/assets/img/animatingCourse.jpg'
        }

        return (
          <div className='CoursesCard' style={divStyle}>
            <div className='CardOverlay'>
              <h3>What the courses is called?</h3>
              <p>Last Checed</p>
              <p>Users online</p>
            </div>
          </div>
        )
    }
}

export default CoursesCard

这里是手写笔语言代码：

 .CoursesCard {
   width 32%
   margin 10px 1%
   float left
   padding-top 20%
   display inline-block
   background white
   box-shadow 0px 3px 20px #555

   background-repeat no-repeat
   background-size cover
   cursor pointer

   &.hover{
      box-shadow 0px 3px 22px #333
    }

.CardOverlay {
    width 100%
   height auto
   padding 10px 0
   background rgba(33,51,66,0.8)
   color #fff

   background-repeat no-repeat
   background-size cover
   cursor pointer

  &.hover {
    box-shadow 0px 3px 22px #333
  }

  h3{
    font-size 18px
    font-weight 500
      margin-bottom 5px
    margin-left 10px
  }
  p.lastChecked{
    font-size 13px
      font-weight 100
      margin-bottom 5px
      margin-left 10px
  }
  p.onlineUsers{
    font-size 14px
      font-weight 400
      margin-left 10px
      display block
  }
}

}

【问题讨论】：

在stackoverflow.com/questions/52111496/…查看我的答案

标签： css reactjs web-applications stylus

【解决方案1】：

在 React 中使用 Stylus 需要像 Webpack 这样的打包工具。我经常使用 Stylus + React，所以我可以提供帮助，但你的问题并没有告诉我你是否设置了 Webpack 和 npm 或 yarn。

由于我没有看到您的完整版本，因此我可以分享我的版本，也许这会有所帮助。这是我在不了解您当前构建的情况下可以逐步帮助您的最接近的方法。希望这会有所帮助！

假设您已经设置了 Webpack 和 npm，并且您的项目已经有一个 package.json 文件...

在终端中运行这些命令...

npm install yarn

yarn init

yarn add poststylus autoprefixer-stylus autoprefixer

css-loader poststylus sass-loader style-loader stylus-loader

让你的 webpack.config.js 与此类似...

const path = require('path');
const postStylus = require('poststylus');
const webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: [
    './source/ClientApp.jsx',
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/only-dev-server',
  ],
  devtool: 'cheap-eval-source-map',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
  },
  devServer: {
    hot: true,
    publicPath: '/public/',
    historyApiFallback: true,
  },
  watch: true,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    // new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.LoaderOptionsPlugin({
       options: {
        stylus: {
          preferPathResolver: 'webpack',
        },
       }
     }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.styl'],
    modules: [
      path.resolve('./source'),
      path.resolve('./node_modules'),
    ],
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true,
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'stylus-loader',
            options: {
              use: [
                postStylus(['autoprefixer']),
              ],
              modules: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

如果您需要参考，这是我的整个 package.json...

{
  "scripts": {
    "lint": "eslint **/*.{js,jsx} --quiet",
    "clean": "rm -r public/bundle.js",
    "build": "rm -r public/bundle.js && webpack",
    "dev": "webpack-dev-server --watch --progress --colors",
    "watch": "webpack --watch"
  },
  "dependencies": {
    "autoprefixer": "^7.1.2",
    "autoprefixer-stylus": "^0.14.0",
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.0.2",
    "babel-plugin-dynamic-import-webpack": "^1.0.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-preset-airbnb": "^2.4.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.24.1",
    "concurrently": "^3.5.0",
    "css-loader": "^0.28.4",
    "d3": "^4.10.0",
    "enzyme": "^2.9.1",
    "eslint": "3.19.0",
    "eslint-config-airbnb": "^15.0.2",
    "eslint-config-airbnb-base": "^11.2.0",
    "eslint-config-react": "^1.1.7",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.1.0",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^3.0.0",
    "firebase": "^4.2.0",
    "firebase-tools": "^3.9.2",
    "json-loader": "^0.5.7",
    "node-sass": "^4.5.3",
    "nodemon": "^1.11.0",
    "poststylus": "^0.2.3",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-date-range": "^0.9.4",
    "react-dom": "^15.6.1",
    "react-hot-loader": "3.0.0-beta.6",
    "react-router-dom": "^4.1.2",
    "react-test-renderer": "^15.6.1",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "sort-package-json": "^1.7.0",
    "style-loader": "^0.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "webpack": "2.6.1",
    "webpack-combine-loaders": "^2.0.3",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.6.1",
    "webpack-hot-middleware": "^2.18.2"
  },
}

【讨论】：

【解决方案2】：

React 与 Stylus 完全没有关系。

我想您正在使用 Webpack 作为捆绑器。如果是这样，您必须配置 Webpack 以便它了解如何处理 .styl 文件（或使用的任何文件扩展名）。

Webpack 具有 loaders 的概念 - loader 加载文件，以某种方式对其进行转换并将输出推送到链中。

您需要添加手写笔加载器。为此，请查看此插件的GH page

【讨论】：