SCSS 文件无法导入 node_module答案

【问题标题】：SCSS file cannot import node_moduleSCSS 文件无法导入 node_module
【发布时间】：2018-03-20 04:43:53
【问题描述】：

在 SCSS 文件中尝试了 @import "~react-icons"。

我收到一个错误：模块构建失败： @import "~react-icons"; ^ 找不到或无法读取要导入的文件：~react-icons。

这是我安装的一个 npm 模块，位于 package-json 上。

我的scss代码是这样的，错误在第一行：

@import "~react-icons";

input {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    padding: 12px 20px 12px 20px;
    margin-bottom: 20px;
}

我的 webpack 配置如下所示：

const webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

let BUILD_DIR = path.resolve(__dirname, 'dist');
let APP_DIR = path.resolve(__dirname, 'src');

let config = {
    entry: path.join(APP_DIR, '/index.js'),
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loaders: ['babel-loader']
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: ['css-loader', 'sass-loader'],
                  publicPath: "/dist"
                })
            },
            {
                test: /\.(ttf|eot|svg|gif|woff(2)?)(\?[a-z0-9]+)?(\?v=
                     [0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader',
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devServer: {
        contentBase: path.join(__dirname),
        // serve index.html in place of 404 responses to allow HTML5 
        // history
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
          title: 'Project',
          minify: {
            collapseWhitespace: true
          },
          hash: true,
          template: './index.html'
        }),
        new ExtractTextPlugin({
          filename: 'style.css',
          disable: false,
          allChunks: true
        })
    ]
};

module.exports = config;

【问题讨论】：

能否请您也将代码发布到您尝试导入 scss 文件的位置？
React Icons 是一个带有 es6 图标而不是 css 的包。对吗？
@VivekDoshi 代码已添加。
我可以知道你为什么要导入 @import "~react-icons"; ?
@VivekDoshi 这样我就可以使用 react-icons fa-search 作为我的样式的背景图像。我尝试导入引导程序，终端给了我同样的错误

标签： reactjs webpack sass

【解决方案1】：

react-icons 没有可导入的 scss 文件。您必须在要使用的文件中导入图标：

import FaSearch from 'react-icons/lib/fa/search';

class Search extends React.Component {
    render() {
        return <FaSearch />
    }
}

【讨论】：