reactjs - plugin - webpack sass to css

sass-loader no funciona con webpack+reaccionar+ojal

Question

Estoy tratando de comenzar con el paquete web y Grommet trabajando juntos. Estoy siguiendo este tutorial: https://github.com/grommet/grommet-standalone pero me aparece el siguiente error:

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

Está claro que está buscando los archivos de archivos scss en el directorio fuente en lugar de node_modules, pero no tengo idea de qué está causando el error ni cómo solucionarlo.

Estoy usando este cargador sass: https://github.com/jtangelder/sass-loader

Y estoy usando el paquete web 2.10 debido a esto: https://stackoverflow.com/a/39608145/1596288

Además, estos son mis archivos webpack.config.babel.js y 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''
]
}
}

y ...

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'')
)

Answer 1

Me las arreglé para solucionar el problema modificando primero mi webpack.config.babel.js a lo siguiente:

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''
]
}

}

Asegúrate de tener las siguientes librerías instaladas también:

sudo npm install style-loader --save-dev
sudo npm install css-loader --save-dev
sudo npm install sass-loader --save-dev

Answer 2

prueba esto

{
test: //.scss$/,
loader: ExtractTextPlugin.extract(''style-loader'', "css-loader!postcss-loader!sass-loader")
},