如何使用 webpack/react 配置 sass？答案

【问题标题】：How can I configure sass with webpack/react?如何使用 webpack/react 配置 sass？
【发布时间】：2016-10-07 01:24:47
【问题描述】：

我正在尝试在 webpack+ react 中使用 sass，这是我的组件：

'use strict';
import React from 'react';

require('style.scss');

class App extends React.Component {
    render() {
        return (
            <div className="hello-form"><p>this should be blue</p></div>
        );
    }

}

export default App;

这是我的配置设置：

loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: ['babel'],
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]

当我运行 webpack 时出现此错误：

ERROR in ./App.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.scss in C:\Users\d815694\WebstormProjects\reactfrom_scratch
 @ ./App.js 24:0-24

如何使用 webpack 配置 sass？

【问题讨论】：

我们能看到所有的 webpack 文件吗？
你确定scss文件的路径正确吗？它应该相对于您的应用组件所在的路径。
@zv.diego 应该是 require('./style.scss');现在可以用了，谢谢！

标签： reactjs sass webpack

【解决方案1】：

我的解决方案是这样的，运行后

create-react-app AppName
cd AppName
# RUN THIS
npm install -D concurrently #Allows to run multiple cmd at the time
npm install -D node-sass

然后在 package.json 添加到脚本

"watch": "concurrently --names 'webpack, sass' --prefix name 'npm run start' 'npm run styles:watch'",
"styles:watch": "sass -w src.scss:dest.css"

全部运行：

npm run watch

希望对你有帮助

【讨论】：

【解决方案2】：

将您的条目设置为直接指向样式表。

例如

entry: ['./assets/scripts/client.js', './assets/styles/client.css']

您不需要从您的 JS 中要求它。额外的好处是，如果你仍然将它用于某些事情，它会让 gulp 工作。

【讨论】：