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")
      },