Stylus 不适用于 React

Question

我正在帮助创建一个 web 应用程序，我们最近切换到手写笔和反应。我已经重写了所有的手写笔 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
  }
}

}

Answer 1

React 与 Stylus 完全无关。

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

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

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

Answer 2

在 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"
  },
}

Stylus 不适用于 React

Stylus is not working with React

css

web-applications

stylus

reactjs