sass-loaderがwebpack + react + grommetと連携していません

Question

webpackとGrommetを併用して作業を始めようとしています。私はこのチュートリアルで、次のよ：https://github.com/grommet/grommet-standaloneをが、私は次のエラーを取得しています：

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 

は明らかに、SCSSファイルのソースディレクトリ内のファイルではなく、node_modulesを探している - が、エラーの原因となっいただきました！私は考えていますかそれを修正する方法。 https://github.com/jtangelder/sass-loader

そして、私はWebPACKの2.10このためのを使用しています：https://stackoverflow.com/a/39608145/1596288

はさらに、これらは私のwebpack.config.babel.jsとindex.jsファイルである私は、このSASSローダーを使用してい

：

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

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れていることを確認します：まず、以下に私のwebpack.config.babel.jsを変性することで問題を解決するために、ED

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") 
     },