获取Grommet与webpack 2一起使用

Question

我正尝试在我的应用程序中设置Grommet-standalone。

我刚刚了解到webpack config中的自定义属性不再受支持。所以sassLoader不起作用。我似乎无法获得替代品webpack.LoaderOptionsPlugin。

这个solution到一个类似的问题没有为我工作。

看看我webpack.config.js：

/* eslint no-var: 0 */ 

var path = require('path'); 
var webpack = require('webpack'); 
var WriteFilePlugin = require('write-file-webpack-plugin'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var APP_DIR = path.resolve(__dirname, 'app'); 

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8081', 
    'webpack/hot/only-dev-server', 
    path.join(APP_DIR, 'index.jsx') 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js' 
    }, 
    devServer: { 
    contentBase: './build', 
    hot: true, 
    inline: true, 
    historyApiFallback: true 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: path.join(APP_DIR, 'index.tmp.html') 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.LoaderOptionsPlugin({ 
     debug: true, 
     options: { 
     sassLoader: { 
      includePaths: [ 
      './node_modules', 
      // this is required only for NPM < 3. 
      // Dependencies are flat in NPM 3+ so pointing to 
      // the internal grommet/node_modules folder is not needed 
      './node_modules/grommet/node_modules' 
      ] 
     } 
     } 
    }), 
    new WriteFilePlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules|bower_components/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader?outputStyle=compressed' 
     } 
    ] 
    } 
}; 

这里是我得到的错误：

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss 
Module build failed: 
undefined 
^ 
     File to import not found or unreadable: inuit-defaults/settings.defaults. 
Parent style sheet: C:/Users/TeneceUBA2/workspaces/sts/eagleswings/src/main/resources/public/node_modules/grommet/scss/grommet-core/_settings.scss 
     in C:\Users\TeneceUBA2\workspaces\sts\eagleswings\src\main\resources\public\node_modules\grommet\scss\grommet-core\_settings.scss (line 4, column 1) 
@ ./~/grommet/scss/vanilla/index.scss 4:14-130 13:2-17:4 14:20-136 
@ ./app/index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8081 webpack/hot/only-dev-server ./app/index.jsx 

以及物品是否完整，这里是我的package.json

{ 
    "name": "eagles", 
    "version": "1.0.0", 
    "description": "desc", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack --config webpack.config.js", 
    "serve": "webpack-dev-server", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Tobe", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-react-transform": "^2.0.2", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "css-loader": "^0.26.1", 
    "eslint": "^3.15.0", 
    "eslint-config-airbnb": "^14.1.0", 
    "eslint-plugin-import": "^2.2.0", 
    "eslint-plugin-jsx-a11y": "^4.0.0", 
    "eslint-plugin-react": "^6.9.0", 
    "html-webpack-plugin": "^2.28.0", 
    "node-sass": "^4.5.0", 
    "react-transform-hmr": "^1.0.4", 
    "sass-loader": "^5.0.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.3.0", 
    "write-file-webpack-plugin": "^3.4.2" 
    }, 
    "dependencies": { 
    "grommet": "^1.2.1", 
    "inuit-defaults": "^0.2.3", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    } 
} 

有没有人得到了Grommet与webpack2一起工作？谷歌在这个场合没有太多帮助。

Answer 1

我今天早上的问题完全一样 - 让Grommet和最新的Webpack一起工作。终于找到了解决办法。这是我webpack.config.js

（运行npm run build当它创建两个文件：一个CSS-和JS-束）：

const webpack = require('webpack') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 
const HtmlPlugin = require('html-webpack-plugin') 
const rimraf = require('rimraf'); 

const NODE_ENV = process.env.NODE_ENV || 'development' 

module.exports = { 
    context: __dirname + '/src', 
    entry: { 
    app: './app.js' 
    }, 
    output: { 
    path: __dirname + '/build', 
    publicPath: '/', 
    filename: '[name].[hash:16].js' 
    }, 
    resolve: { 
    extensions: ['.jsx', '.js', '.scss', '.css'] 
    }, 
    watch: NODE_ENV == 'development', 
    devtool: NODE_ENV == 'development' ? 'eval' : 'source-map', 
    devServer: { 
    contentBase: 'build/', 
    host: 'localhost', 
    port: 8080, 
    historyApiFallback: true, 
    proxy: [ 
     { 
     path: '/api/', 
     target: 'http://localhost:3000', 
     pathRewrite: {'^/api' : ''} 
     } 
    ] 
    }, 
    plugins: [ 
    { 
     apply: (compiler) => { 
     rimraf.sync(compiler.options.output.path) 
     } 
    }, 
    new webpack.DefinePlugin({ 
     NODE_ENV: JSON.stringify(NODE_ENV) 
    }), 
    new ExtractTextPlugin({ 
     filename: '[name].[contenthash:16].css', 
     allChunks: true 
    }), 
    new HtmlPlugin({ 
     template: './index.html' 
    }) 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     include: __dirname + '/src' 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       sourceMap: true, 
       } 
      }, 
      ] 
     }) 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      use: [ 
      { 
       loader: 'css-loader' 
      }, 
      { 
       loader: 'sass-loader', 
       options: { 
       sourceMap: true, 
       includePaths: [ 
        __dirname + '/node_modules' 
       ], 
       outputStyle: 'compressed' 
       } 
      } 
      ] 
     }) 
     } 
    ] 
    }, 
} 

if (NODE_ENV == 'production') { 
    module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
     warnings: false, 
     drop_console: true, 
     unsafe: true 
     } 
    }) 
) 
    module.exports.plugins.push(
    new BundleAnalyzerPlugin() 
) 
} 

请确保您有最新版本的ExtractTextPlugin的。这里是我的package.json btw：

{ 
    "private": true, 
    "devDependencies": { 
    "babel-core": "latest", 
    "babel-loader": "latest", 
    "babel-preset-es2015": "latest", 
    "babel-preset-react": "latest", 
    "babel-preset-react-hmre": "latest", 
    "babel-preset-stage-0": "latest", 
    "concurrently": "latest", 
    "css-loader": "latest", 
    "extract-text-webpack-plugin": "^2.0.0-rc.3", 
    "html-webpack-plugin": "latest", 
    "node-sass": "latest", 
    "rimraf": "latest", 
    "sass-loader": "latest", 
    "style-loader": "latest", 
    "webpack": "latest", 
    "webpack-bundle-analyzer": "latest", 
    "webpack-dev-server": "latest" 
    }, 
    "dependencies": { 
    "grommet": "latest", 
    "immutable": "latest", 
    "jwt-decode": "latest", 
    "react": "latest", 
    "react-dom": "latest", 
    "react-helmet": "latest", 
    "react-intl": "latest", 
    "react-redux": "latest", 
    "react-router": "latest", 
    "redux": "latest", 
    "redux-logger": "latest", 
    "validator": "latest" 
    } 
}