如何配置webpack /反應的sass？

我試圖用青菜中的WebPack +反應，這是我的組件：如何配置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？

來源

2016-10-07 bier hier

我們可以看到所有的webpack文件嗎？ – EQuimper

你確定scss文件的路徑是正確的嗎？它應該與您的應用程序組件所在的路徑相關。 – dzv3

@ zv.diego它應該是require（'./ style.scss'）;它正在工作，謝謝！ –

我的解決方法是這樣的，運行

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

希望幫助

來源

2016-12-07 07:22:08 T04435

將您的條目設置爲直接指向樣式表。

E.g.

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

你不需要從你的JS中得到它。獎金是，如果你仍然在使用它來做某件事，它會使吞嚥工作成爲可能。

來源

2016-10-07 05:26:54 hendry

如何配置webpack /反應的sass？

回答

相關問題