Verwenden von Tülle mit ReactJS webpack und scss import Problem

Question

Ich versuche, Tülle in meinem React Project zu verwenden, und ich verwende Webpack. Ich habe die SCSS loader hinzugefügt und wenn ich bauen meine app ich die folgende Störung erhalte:

ERROR in ./~/css-loader!./~/sass-loader!./scss/index.scss 
Module build failed: 
@import "inuit-defaults/settings.defaults"; 
^ 
     File to import not found or unreadable: inuit-defaults/settings.defaults 
Parent style sheet: /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss 
     in /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1) 
@ ./scss/index.scss 4:14-116 13:2-17:4 14:20-122 

nicht sicher, was ich falsch mache ..

Hier ist meine webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

module.exports ={ 
    devtool :'cheap-module-eval-source-map', 
    entry:[ 
     'webpack/hot/only-dev-server', 
     './index.jsx' 
    ], 
    module:{ 
     loaders:[ 
      { 
       test: /\.jsx?$/, 
       exclude :/node_modules/, 
       include: __dirname, 
       loader:'react-hot' 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude :/node_modules/, 
       include: __dirname, 
       loader:'babel', 
       query:{ 
        "plugins":["transform-decorators-legacy"], 
        "presets":["es2015","react"] 
       } 
      }, 
      { 
       test :/\.css?$/, 
       include: __dirname, 
       loaders :['style','css'] 
      }, 
      { 
       test: /\.less$/, 
       loader: "style!css!less" 
      }, 
      { 
       test: /\.json$/, 
       loader: "json" 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ["style", "css", "sass"] 
      } 
     ] 
    }, 
    resolve:{ 
     extensions:['','.js','.jsx'] 
    }, 
    output:{ 
     path: __dirname+'/', 
     publicPath:'/', 
     filename:'bundle.js' 
    }, 
    devServer:{ 
     contentBase: './', 
     hot:true 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 
     ,new webpack.NoErrorsPlugin() 
    ] 
} 

Answer 1

ich hatte das gleiche Problem, und bekam diese Arbeit auf diese Weise:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    // ... 
    module: { 
     loaders: [ 
      // ... 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('css!sass') 
      } 
     ] 
    }, 
    sassLoader: { 
     includePaths: [ './node_modules' ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('public/grommet.css', { 
      allChunks: true 
     }) 
    ] 
} 

Aber erinnere mich an die erzeugte CSS-Datei in Ihre index.html

Answer 2

aktualisieren zu importieren, wenn u npm3 verwenden + Sie können dies einfach tun (siehe alan's explanation here):

{ 
    test: /\.scss$/, 
    loader: 'style!css!sass?outputStyle=expanded&' + 
     'includePaths[]=' + 
     (encodeURIComponent(path.resolve('./node_modules'))) 
}, 

---

oder schreiben SCSS loader wie dies:

{ 
    test: /\.scss$/, 
    loader: "style!css!sass?OutputStyle=expaned&" + 
    'includePaths[]=' + 
    (encodeURIComponent(
    path.resolve(process.cwd(), './node_modules') 
)) + 
    '&includePaths[]=' + 
    (encodeURIComponent(
    path.resolve(process.cwd(), 
    './node_modules/grommet/node_modules')) 
) 
} 

Answer 3

Verwenden Sie den folgenden scss Loader in der Webpack - Konfiguration (dank)

{ 
       test: /\.scss$/, 

       loader: 'style!css!sass?outputStyle=expanded&' + 
       'includePaths[]=' + 
       (encodeURIComponent(
        path.resolve(process.cwd(), './node_modules') 
       )) + 
       '&includePaths[]=' + 
       (encodeURIComponent(
         path.resolve(process.cwd(), 
          './node_modules/grommet/node_modules')) 
       ) 
      } 

Answer 4

I es fest durch Webpack 2 Konventionen folgenden.

{ 
    test: /(\.scss$)/, 
    loaders: [{ 
    loader: 'style-loader' 
    }, { 
    loader: 'css-loader' 
    }, { 
    loader: 'sass-loader', 
    options: { 
     outputStyle: 'compressed', 
     includePaths: ['./node_modules'] 
    } 
    }] 
} 

Arbeiten ganz gut auf meiner Seite!