React Toolbox使用默认CSS样式 [英] React Toolbox Use Default CSS Style

问题描述

如何正确使用React-Toolbox的默认样式?

How do I correctly use the default styling of React-Toolbox?

我想尝试这个库，但是花了很多时间尝试配置scss/css.我可以导入和渲染react-toolbox组件，但是它们没有样式.
使用public/index.html

I would like to try this library, but have lost hours trying to configure the scss/css. I can import and render react-toolbox components, but they are not styled.
Roboto font and material work fine using <link> tags in public/index.html

根据简短的安装步骤，我包括了css-loader，sass-loader和babel.

According to the brief installation steps, I have included css-loader, sass-loader, and babel.

我从 https://github.com/react-toolbox复制了示例项目/react-toolbox-example .我在几个地方删除了多余的样式表，例如style.scss，以减少并减少混乱.我注意到示例项目还包含<link rel="stylesheet" href="react-toolbox.css">(在安装步骤，文档或自述文件中没有看到).必需<link>，将其删除会取消示例的样式. (侧面查询:如何以及在何处构建/获取最终的css文件?即使使用npm在本地提供，也不在目录中.)

I copied the example project from https://github.com/react-toolbox/react-toolbox-example. I removed the extra style sheets, such as style.scss in a couple places, to pare down and reduce confusion. I noticed the example project also includes <link rel="stylesheet" href="react-toolbox.css"> (which I do not see in the install steps, docs, or README). That <link> is required, removing it de-styles the example. (Side Query: How and where does that end css file build/get served? It's not in the directory even after serving locally with npm.)

因此，我从示例中复制了全部/大部分index.jsx，package.json和webpack.config.js，并添加了样式表<link>，使文件名与示例和我的配置匹配.

So, I copied all/most of index.jsx, package.json, and webpack.config.js from the example, and added that stylesheet <link>, matching the filename to the example and my config.

我正在与import 'react-toolbox/lib/commons'导入公地.

样式链接和导入似乎无效. 运行npm start时，我没有来自npm/webpack的错误. 一个类似的github问题发表评论表示惊讶，因为类似的问题没有webpack错误.

The style link and the import seem to have no effect. I have no errors from npm/webpack when running npm start. One of the similar github issues has a comment expressing surprise there was no webpack error for a similar problem.

我也尝试过[3](请参阅注释)，尽管我不知道这样做的意思.那张海报暗示这不是理想的，我还没有在其他地方看到过这种模式.

I've also tried [3] (see comment), though I don't understand what that does. That poster implied it's not ideal, and I haven't seen that pattern elsewhere.

我了解这可能会重复React-toolbox如何包含样式正确.我的代表太低，无法在此处发表评论，并且该问题目前尚未得到解答.由于相关问题似乎很普遍，我希望社区回答会有所帮助.

I understand this may duplicate React-toolbox how to include the styles correctly. My rep is too low to comment there, and that question is currently unanswered. As related issues seem common, I hope a community answer would be helpful.

在各种问题中，听起来通常只是webpack配置问题.如果是这样，我想知道什么是正确的配置 .我怀疑我在某个地方缺少一行，或者在大多数情况下都缺少关于React和Webpack的现代前端的简单知识，或者大多数人都认为是常识.我是这些工具的新手.

In the various issues, it sounds like it was usually just a webpack config issue. If that's the case, I'd like to know what the correct config is please. I suspect I'm missing a single line or so somewhere, or missing something simple about modern front end with React and Webpack in general that may be assumed or common knowledge by most; I'm new to these tools.

我准备导入一个不同的组件库，但是相比之下，我喜欢我读过的有关React-Toolbox的内容，它看起来对移动设备友好，我至少要尝试一下.

I'm about ready to just import a different component library, but I like what I've read about React-Toolbox in comparison, it seems mobile friendly, and I would like to at least try it.

package.json :(名称，许可证，描述省略)

package.json: (name, license, description omitted)

 {
    "scripts": {
        "start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
        "build": "webpack -d --config webpack.dev.config.js --profile --progress --colors"
    },
    "engines": {
        "node": "0.10.x"
    },
    "dependencies": {
        "autoprefixer": "^6.2.3",
        "babel-core": "^6.4.0",
        "babel-eslint": "^4.1.6",
        "babel-loader": "^6.2.1",
        "babel-plugin-react-transform": "^2.0.0",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "classnames": "^2.2.3",
        "css-loader": "^0.9.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "j-toker": "0.0.10-beta3",
        "jquery": "2.2.0",
        "jsuri": "^1.3.0",
        "jsx-loader": "^0.12.2",
        "node-sass": "^3.4.2",
        "normalize.css": "^3.0.3",
        "postcss-loader": "^0.8.0",
        "react": "^0.14.6",
        "react-addons-css-transition-group": "^0.14.6",
        "react-dom": "^0.14.6",
        "react-router": "^1.0.3",
        "react-toolbox": "^0.14.0",
        "react-transform-catch-errors": "^1.0.1",
        "react-transform-hmr": "^1.0.1",
        "sass-loader": "^3.1.2",
        "style-loader": "^0.8.3",
        "toolbox-loader": "0.0.3",
        "webpack": "^1.12.11",
        "webpack-dev-server": "^1.8.0",
        "webpack-hot-middleware": "^2.6.0"
    }
}

webpack.config.js:

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './app/client/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'react-toolbox.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
           presets:['es2015','react']
        }
      },
      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
      }
    ]
  },
  toolbox: {
    theme: path.join(__dirname, 'app/client/toolbox-theme.scss')
  },
  postcss: [autoprefixer],
  plugins: [
    new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

index.jsx:

index.jsx:

import 'react-toolbox/lib/commons';

import React from 'react';
import ReactDOM from 'react-dom';

import ToolboxApp from 'react-toolbox/lib/app';
import {Button, IconButton} from 'react-toolbox/lib/button';
import Checkbox from 'react-toolbox/lib/checkbox';
import Header from './components/layout/Header';

ReactDOM.render((
    <ToolboxApp>
        <Header />
        <Button className="button" icon="add" floating accent/>
        <IconButton onClick={function(){alert('clicked')}} icon='favorite' accent />
    </ToolboxApp>
), document.getElementById('app'));

推荐答案

我将大多数示例存储库复制到 https://github.com/react-toolbox/react-toolbox-example 到我的app/client目录中的新分支上.我几乎不需要进行调整，它似乎可以正常工作.虽然这不能解决我在配置或文件结构上出现的问题，但我可能不得不重复一些努力，但我可以继续前进.

I copied most of the example repo at https://github.com/react-toolbox/react-toolbox-example into my app/client directory, on a new branch. I had to adjust very little, and it seems to work. While this doesn't answer where I went wrong with configs or file structure, and I may have to repeat some effort, I can move forward.

这个问题可能会受益于更好的建议，即如何在不替换现有文件夹/文件的情况下将React-Toolbox添加到现有项目中.

This question may benefit from better suggestions how to add React-Toolbox to an existing project, without replacing existing folders/files.

这篇关于React Toolbox使用默认CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！