如何使用webpack/react配置sass ?

Question

我想在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:Usersd815694WebstormProjectsreactfrom_scratch
 @ ./App.js 24:0-24

如何用webpack配置sass ?

Answer 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

then in package。

"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

希望有所帮助

Answer 2

设置条目直接指向样式表。

。

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

你不需要从JS中要求它。好处是，如果你还在使用gulp，它可以使gulp工作。