sass-loader 不适用于 webpack + react + grommet答案

【问题标题】：sass-loader not working with webpack + react + grommetsass-loader 不适用于 webpack + react + grommet
【发布时间】：2017-06-20 16:05:41
【问题描述】：

我正在尝试开始使用 webpack 和 Grommet 一起工作。我正在关注本教程：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

显然它在源目录中寻找 scss 文件而不是 node_modules - 但我不知道是什么导致了错误或如何修复它。

我正在使用这个 sass 加载程序：https://github.com/jtangelder/sass-loader

我正在使用 webpack 2.10，因为：https://stackoverflow.com/a/39608145/1596288

另外，这些是我的 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'
        ]
    }
}

和...

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

【问题讨论】：

标签： reactjs sass webpack sass-loader grommet

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

通过首先将我的 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'
    ]
}

}

确保您也安装了以下库：

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

【讨论】：