使用带有ReactJS网页包和scss导入问题的索环
我正在尝试在我的React项目中使用索环,我正在使用webpack。我已经添加了scss加载程序,当我构建我的应用程序时,我收到以下错误:使用带有ReactJS网页包和scss导入问题的索环,reactjs,webpack,grommet,Reactjs,Webpack,Grommet,我正在尝试在我的React项目中使用索环,我正在使用webpack。我已经添加了scss加载程序,当我构建我的应用程序时,我收到以下错误: 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-de
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
我不知道我做错了什么
这是我的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()
]
}
我也有同样的问题,通过这种方式解决了这个问题:
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
})
]
}
但请记住将生成的css文件导入index.html更新
如果您使用npm3+,您可以简单地执行此操作(请参阅):
或者像这样编写scss加载程序:
{
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'))
)
}
在webpack配置中使用以下scss加载程序(感谢)
我按照Webpack2的约定修复了它
{
test: /(\.scss$)/,
loaders: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
includePaths: ['./node_modules']
}
}]
}
在我这边工作得很好 webpack2中的“使用加载器时不再允许省略'-loader'后缀”
{
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'))
)
}
{
test: /(\.scss$)/,
loaders: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
includePaths: ['./node_modules']
}
}]
}