Reagieren Toolbox finden ~ react-toolbox/lib/Farben

Question

Ich habe ein Problem beim Einrichten des Webpack mit Toolbox. Aus irgendeinem Grund weiß ich nicht, warum es nicht funktioniert.

Meine webpack Datei wie folgt aussieht:

const path = require('path'); 
const webpack = require('webpack'); 
const autoprefixer = require('autoprefixer'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: __dirname, 
    devtool: 'inline-source-map', 
    entry: { 
    factigisVE: './static/js/bundles/factigisVE.js', 
    vendor: [ 
     'webpack-hot-middleware/client' 
    ] 
    }, 
    output: { 
    path: path.join(path.join(__dirname, 'dist'), 'js'), 
    filename: '[name].js', 
    libraryTarget: "amd", 
    publicPath: '/' 
    }, 
    resolve: { 
    extensions: ['', '.scss', '.css', '.js', '.json','.webpack.js', '.web.js', '.js', '.jsx'], 
    modulesDirectories: [ 
     'node_modules', 
     path.resolve(__dirname, './node_modules') 
    ] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /(\.js|\.jsx)$/, 
     exclude: /(node_modules)/, 
     loader: 'babel', 
     query: { presets: ['es2015', 'stage-0', 'react','stage-2'] } 
     }, { 
     test: /(\.scss|\.css)$/, 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass') 
     } 
    ] 
    }, 
    externals: [ 
     function(context, request, callback) { 
      if (/^dojo/.test(request) || 
       /^dojox/.test(request) || 
       /^dijit/.test(request) || 
       /^esri/.test(request) 
     ) { 
       return callback(null, "amd " + request); 
      } 
      callback(); 
     } 
    ], 
    devServer: { 
    inline: true, 
    port: 443, 
    host: "127.0.0.1", 
    historyApiFallback: true 
    }, 
    devtool: 'source-map', 
    postcss: [autoprefixer], 
    sassLoader: { 
    data: '@import "css/index.scss";', 
    includePaths: [path.resolve(__dirname, './static')] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('../css/style.css', { allChunks: true }), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }) 
    ] 
}; 

Und dann meine index.scss wie folgt aussieht:

@import "~react-toolbox/lib/colors"; 



$color-primary: $palette-blue-500; 
$color-primary-dark: $palette-blue-700; 

Die Fehler, die mit im, sind:

Error: File to import not found or unreadable: ~react-toolbox/lib/colors 
parent style sheet: I:/proyect/ve/static/css/index.scss on line 1 of static/css/index.scss 

> @import "~react-toolbox/lib/colors"; 

Auch mein Verzeichnis sieht aus wie: my directory Jede Hilfe auf was los ist wird wirklich appr eciate. Danke!

Answer 1

Ich konnte dieses Problem beheben, indem Sie die ~ vom Anfang des Imports entfernen.

@import "react-toolbox/lib/colors"; 

Die postcss-import Plugin erscheint die same behvaior zu haben.