带有反应渲染的 Sass 不起作用答案

【问题标题】：Sass with react render not working带有反应渲染的 Sass 不起作用
【发布时间】：2016-11-05 14:39:00
【问题描述】：

我是新来的反应并且一直在玩它。这可能是基本的，所以请多多包涵。

基本上，我一直在设置我的环境（React+Babel+webpack）。我目前正在将 sass 与 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;
    }
}

我会很感激你的帮助，如果我能找到一些好的资源来寻找初学者，我会很高兴。

【问题讨论】：

在什么情况下它不起作用？您是否遇到错误，或者只是没有应用样式？
@JoshuaComeau 没有错误。它没有应用样式。

标签： reactjs sass ecmascript-6 webpack webpack-dev-server

【解决方案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'
}

我远不是 webpack 专家，但我相信这会解决你的问题 :)

【讨论】：

你的意思是，如果我只是放弃 ExtractTextPlugin，我可以只导入 scss 文件，它会正常工作吗？
好吧，我之前已经尝试过，但没有运气。没有错误，也没有应用任何样式。
离开 ExtractTextPlugin，构建它（使用webpack -p）并检查渲染文件怎么样？在 build 目录中应该有一个 .css 文件，您可以将其添加为 HTML 中的 <link>
我设法通过从头开始配置 webpack 来解决它。显然，不确定问题是否在于我没有在 html 中添加链接。我应该提高你的答案。谢谢你。另外，如果你能指导我关于反应文件夹结构的最佳实践？如果您能指出正确的方向（测试驱动开发），我将不胜感激