SCSS文件无法导入node_module

问题描述：

在SCSS文件中尝试@import“〜react-icons”。SCSS文件无法导入node_module

我收到一个错误：模块构建失败： @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代码已添加。 –

答

没有一个SCSS文件导入为react-icons 。您必须在要使用的文件中导入图标：

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

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

SCSS文件无法导入node_module

相关推荐