Question

我有以下内容：

Layout.jsx：

....
import '../styles/core.css'

core.css

@import 'reset';

core.css只适用于CSS，但如果我尝试使用@import，我会收到以下错误：

07:58:15 web.1  | Error in ./src/styles/core.css
07:58:15 web.1  | Module not found: ./reset in /Users/x/sites/app/client/src/styles
07:58:15 web.1  | 
07:58:15 web.1  |  @ ./~/react-scripts/~/css-loader?importLoaders=1!./~/postcss-loader!./src/styles/core.css 3:10-155
07:58:15 web.1  | 
07:59:06 web.1  | Compiling...
07:59:07 web.1  | Failed to compile.
07:59:07 web.1  | 
07:59:07 web.1  | Error in ./src/styles/core.css
07:59:07 web.1  | Module not found: ./reset in /Users/x/sites/app/client/src/styles
07:59:07 web.1  | 
07:59:07 web.1  |  @ ./~/react-scripts/~/css-loader?importLoaders=1!./~/postcss-loader!./src/styles/core.css 3:10-155

如何在我的React应用中启用@import？

由于

Answer 1

如果您使用的是webpack，则可能需要在路径的开头使用use~。因此，如果要导入以下路径node_modules / bootstrap / src / core.scss，您可以编写类似

的内容

@import "~reset"

注意：看起来这对每个人都不起作用。如果你的翻译是基于libsass，它应该工作正常（结帐）。我在node-sass上使用@import进行了测试，它运行正常。不幸的是，这有效并且不适用于某些ruby实例。

我从未使用过创建反应应用程序，我在这里使用webpack所以如果反应应用程序使用webpack作为模块捆绑器，你应该在你的项目中有这2个依赖项：

style-loader，css-loader和extract-text-webapack-plugin

查看我的webpack.config.js

中的我的代码段

import ExtractTextPlugin from 'extract-text-webpack-plugin';
 {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader',
    }),
  },

如何在React App中@import CSS？

1 个答案: