我正在尝试在我的应用程序中设置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合作？谷歌在这个场合没有任何帮助。
答案 0 :(得分：0)
今天早上我遇到了完全相同的问题 - 让Grommet与最新的Webpack合作。终于找到了解决方案。这是我的webpack.config.js
（运行npm run build时会创建2个文件：css-和js-bundle）：
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"
}
}