sass-loader가 webpack + react + grommet과 함께 작동하지 않습니다.

Question

webpack과 Grommet를 함께 사용하려고합니다. 오류의 원인 또는 뭐죠하지만 난 아무 생각이 - 분명히

ERROR in ./src/app/index.js 
Module not found: Error: Can't resolve 'grommet/scss/vanilla/index' in '/home/john/Development/Work/Utilities/react_practice/test_app/src/app' 
@ ./src/app/index.js 31:0-37 
@ multi library 

오히려 node_modules보다 소스 디렉토리에서하는 SCS 파일 파일을 찾고 :이 튜토리얼을 다음 해요 : https://github.com/grommet/grommet-standalone 그러나 나는 다음과 같은 오류를 받고 있어요 그것을 고치는 법.

나는이 말대꾸 로더 사용하고 있습니다 : https://github.com/jtangelder/sass-loader

을 그리고 웹팩이 때문에 2.10 사용하고 있습니다 : https://stackoverflow.com/a/39608145/1596288

는 또한 이러한 내 webpack.config.babel.js하고하는 index.js 파일입니다을 :

import webpack from 'webpack'; 

module.exports = { 
    entry: { 
     library: './src/app/index.js', 
    }, 

    output: { 
     library: 'bundle', 
     libraryTarget: 'umd', 
     filename: 'bundle.js', 
     path: './public/dist' 
    }, 

    devServer : { 
     inline: true, 
     contentBase: './public', 
     port: 8100 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 

      { 
       test: /\.scss$/, 
       loader: 'style!css!sass?outputStyle=compressed' 
      } 
     ] 
    }, 

    sassLoader: { 
     sourceMap: true, 
     includePaths: [ 
      './node_modules', 
      './node_modules/grommet/node_modules' 
     ] 
    } 
} 

및 ...

import Header from 'grommet/components/Header'; 
import Title from 'grommet/components/Title'; 
import Box from 'grommet/components/Box'; 
import Search from 'grommet/components/Search'; 
import Menu from 'grommet/components/Menu'; 
import Anchor from 'grommet/components/Anchor'; 
import Actions from 'grommet/components/icons/base/Actions' 

import 'grommet/scss/vanilla/index'; 

import React from 'react' 
import { render } from 'react-dom' 

const TesterComponent =() => (
    <Header> 
     <Title> 
      Sample Title 
     </Title> 

     <Box flex={true} 
     justify='end' 
     direction='row' 
     responsive={false}> 
      <Search inline={true} 
      fill={true} 
      size='medium' 
      placeHolder='Search' 
      dropAlign={{"right": "right"}} /> 

      <Menu icon={<Actions />} 
      dropAlign={{"right": "right"}}> 
       <Anchor href='#' 
        className='active'> 
        First 
       </Anchor> 
       <Anchor href='#'> 
        Second 
       </Anchor> 
       <Anchor href='#'> 
        Third 
       </Anchor> 
      </Menu> 
     </Box> 
    </Header> 
) 


render (
    <TesterComponent />, 
    document.getElementById('root') 
) 

Answer 1

MANAG 에드는 먼저 다음 내 webpack.config.babel.js를 개질시키기하여 문제를 해결하기 위해 :

import webpack from 'webpack'; 

module.exports = { 
entry: { 
    library: './src/app/index.js', 
}, 

output: { 
    library: 'bundle', 
    libraryTarget: 'umd', 
    filename: 'bundle.js', 
    path: './public/dist' 
}, 

devServer : { 
    inline: true, 
    contentBase: './public', 
    port: 8100 
}, 

resolve: { 
    extensions: ['', '.js', '.scss', '.css'] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }, 

     { 
      test: /\.scss$/, 
      loader: 'style-loader!css-loader!sass-loader?outputStyle=compressed' 
     } 
    ] 
}, 

sassLoader: { 
    includePaths: [ 
     './node_modules', 
     './node_modules/grommet/node_modules' 
    ] 
} 

}

가 있는지 확인합니다 다음 libs가 너무 설치 :

sudo npm install style-loader --save-dev 
sudo npm install css-loader --save-dev 
sudo npm install sass-loader --save-dev 

Answer 2

시도 이

{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', "css-loader!postcss-loader!sass-loader") 
     },