Question

我正在尝试在webpack +中使用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？

Answer 1

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

E.g。

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

您无需从JS中获取它。额外的好处是，如果你仍然使用它，它会使吞咽成功。

Answer 2

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

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

希望有所帮助

如何使用webpack / react配置sass？

2 个答案: