[英]sass-loader not working with webpack + react + grommet
I'm trying to get started with webpack and Grommet working together. 我正在尝试开始与webpack和Grommet一起工作。 I'm following this tutorial: https://github.com/grommet/grommet-standalone but I'm getting the following error:
我正在关注本教程: https : //github.com/grommet/grommet-standalone,但出现以下错误:
ERROR in ./src/app/index.js
Module not found: Error: Can't resolve 'grommet/scss/vanilla/index' in '/home/john/Development/Work/Utilities/react_practice/test_app/src/app'
@ ./src/app/index.js 31:0-37
@ multi library
Clearly it's looking for the scss file files in the source directory rather than node_modules - but I have no idea whats causing the error or how to fix it. 显然,它是在源目录中而不是在node_modules中寻找scss文件文件-但我不知道是什么原因导致了错误或如何修复该错误。
I'm using this sass loader: https://github.com/jtangelder/sass-loader 我正在使用这个sass loader: https : //github.com/jtangelder/sass-loader
And I'm using webpack 2.10 because of this: https://stackoverflow.com/a/39608145/1596288 因为这个原因,我正在使用webpack 2.10: https ://stackoverflow.com/a/39608145/1596288
Additionally, these are my webpack.config.babel.js and index.js files: 另外,这些是我的webpack.config.babel.js和index.js文件:
import webpack from 'webpack';
module.exports = {
entry: {
library: './src/app/index.js',
},
output: {
library: 'bundle',
libraryTarget: 'umd',
filename: 'bundle.js',
path: './public/dist'
},
devServer : {
inline: true,
contentBase: './public',
port: 8100
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: 'style!css!sass?outputStyle=compressed'
}
]
},
sassLoader: {
sourceMap: true,
includePaths: [
'./node_modules',
'./node_modules/grommet/node_modules'
]
}
}
and ... 还有...
import Header from 'grommet/components/Header';
import Title from 'grommet/components/Title';
import Box from 'grommet/components/Box';
import Search from 'grommet/components/Search';
import Menu from 'grommet/components/Menu';
import Anchor from 'grommet/components/Anchor';
import Actions from 'grommet/components/icons/base/Actions'
import 'grommet/scss/vanilla/index';
import React from 'react'
import { render } from 'react-dom'
const TesterComponent = () => (
<Header>
<Title>
Sample Title
</Title>
<Box flex={true}
justify='end'
direction='row'
responsive={false}>
<Search inline={true}
fill={true}
size='medium'
placeHolder='Search'
dropAlign={{"right": "right"}} />
<Menu icon={<Actions />}
dropAlign={{"right": "right"}}>
<Anchor href='#'
className='active'>
First
</Anchor>
<Anchor href='#'>
Second
</Anchor>
<Anchor href='#'>
Third
</Anchor>
</Menu>
</Box>
</Header>
)
render (
<TesterComponent />,
document.getElementById('root')
)
Managed to fix the issue by firstly modifiying my webpack.config.babel.js to the following: 通过首先将我的webpack.config.babel.js修改为以下内容来解决此问题:
import webpack from 'webpack';
module.exports = {
entry: {
library: './src/app/index.js',
},
output: {
library: 'bundle',
libraryTarget: 'umd',
filename: 'bundle.js',
path: './public/dist'
},
devServer : {
inline: true,
contentBase: './public',
port: 8100
},
resolve: {
extensions: ['', '.js', '.scss', '.css']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader?outputStyle=compressed'
}
]
},
sassLoader: {
includePaths: [
'./node_modules',
'./node_modules/grommet/node_modules'
]
}
} }
Make sure you have the following libs installed too: 确保还安装了以下库:
sudo npm install style-loader --save-dev
sudo npm install css-loader --save-dev
sudo npm install sass-loader --save-dev
try this 尝试这个
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', "css-loader!postcss-loader!sass-loader")
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.