将css和scss文件导入reactjs显示错误意外令牌。

Question

相信我，我一直在梳理Stackoverflow过去的问题，看看是否有任何解决方案可以解决我的问题，但没有运气。

在这里，我试图将两个文件导入一个react应用程序(css和scss)中，.This文件驻留在node_modules目录中。

如果我用@参数导入它，它将显示错误未知令牌

@import '~react-toastify/dist/ReactToastify.css';
@import '~react-toastify/dist/main.scss';

如果按照下面的代码在没有@参数的情况下导入它，它将显示未找到的错误模块。无法解析

import '~react-toastify/dist/ReactToastify.css';
    import '~react-toastify/dist/main.scss';

在我webpack的配置中。我已经设置了扩展解析。

resolve: {
        extensions: ['.js', '.jsx', '.css', '.scss']
    },

到css和scss文件名，但无法使其工作。

这是我的完整webpack配置文件。

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.scss']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-3']
                }
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
    })],
    devServer: {
port: 4200,
        historyApiFallback: true

    },
    externals: {
        // global app config object

        config: JSON.stringify({
            apiUrl: 'http://localhost'
        })

    }
}

这是package.json文件

{
  "name": "importing css example",
  "version": "1.0.0",
  "repository": {
    "type": "",
    "url": ""
  },
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "dependencies": {
    "history": "^4.6.3",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-toastify": "^4.4.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "html-webpack-plugin": "^2.26.0",
    "path": "^0.12.7",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

Answer 1

您的webpack配置缺少加载css或scss扩展样式的加载器。由于您没有为具有CSS或SCSS扩展名的文件指定任何加载程序(这可能是您的场景)，webpack默认将其视为JS。还对webpack配置中的模块加载规则进行如下更改：

module:{
  rules: [
    {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-3']
            }
        },
    {
      test: /\.(s?)css$/,
      use: [
            "style-loader",
            "css-loader",
            "sass-loader"
          ]
      }]
    }

将上述代码添加到webpack配置中，然后尝试加载scss或css文件。希望能帮上忙。:)