Question

我是新手做出反应并一直在玩它。这可能是基本的，所以请耐心等待。

基本上，我一直在设置我的环境（React + Babel + webpack）。我目前正在使用sass with react，但我不知道为什么这不起作用。

Webpack配置

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    context: path.join(__dirname, "src"),
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/client.js",
    module: {
        loaders: [{
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
                }
            },
            { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
            { test: /\.css$/, loader: "style-loader!css-loader" }, {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader',
            },
            {
                test: /\.scss$/,
               loader: ExtractTextPlugin.extract(
                'style', // backup loader when not building .css file
                'css!sass' // loaders to preprocess CSS
    )
            }
        ]
    },
    output: {
        path: __dirname + "/src/",
        filename: "client.min.js"
    },
   plugins:  [
        new ExtractTextPlugin("styles.css")
       ] 
};

的index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>React</title>
</head>

<body>
    <div id="example"></div>
    <script src="client.min.js"></script>
</body>

</html>

Client.js /入口点

import React from "react";
import ReactDOM from "react-dom";
import "./pages/css/bootstrap.min.css"; //Added bootstrap css and it was working fine
import "./pages/client.scss";


const app = document.getElementById('example');

ReactDOM.render(
    <h1 className="hello">Yayyy</h1>,
            example);

client.scss

.hello {
    h1 {
        color: blue;
    }
}

我将非常感谢你的帮助，如果我有一些好的资源可以为初学者调查，我会很高兴。

Answer 1

我相信我看到了发生了什么！

Webpack通常将所有模块（无论是JS，CSS等）捆绑到一个大的JS文件中。但是，ExtractTextPlugin用于以文本格式单独捆绑某些内容。

当您要创建外部.css文件时使用。如果你走这条路线，你的HTML文件中会包含<link rel="stylesheet" href="path/to/file">。

更传统的方法是像处理CSS一样对待SCSS。然后，你可以在JS中import：）

示例：

{
  test: /\.scss$/,
  loader: 'style!css!sass'
}

我离网络专家很远，但我相信这会解决你的问题：）

Sass with react渲染不起作用

1 个答案: