如何在反應應用程序中@import CSS？

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？

感謝

來源

2017-06-17 AnnaSm

@import是CSS還是少了？ – VivekN

這不就是標準的CSS嗎？ https://developer.mozilla.org/en-US/docs/Web/CSS/@import – AnnaSm

@ user1917603你可以發佈你的webpack文件嗎？ – WitVault

如果你正在使用的WebPack，你可能會需要使用用途〜在路徑的開始。所以，如果你想導入以下路徑node_modules /引導/ src目錄/ core.scss你會寫類似

@import "~reset"

注：看來，這是不工作的每一個人。如果你的解釋器基於libsass，它應該工作正常（檢查這個）。我已經在node-sass上使用@import進行了測試，並且工作正常。不幸的是，這個工程並不適用於某些ruby實例。

我從來沒有用過創建應用程序的反應，我用的WebPack這裏，所以，如果反應的應用程序使用的WebPack作爲模塊捆綁，你應該在你的項目這兩個依賴條件：

風格裝載機，CSS-裝載機和提取 - 文本webapack-插件

看看我的片段，是我webpack.config.js內

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

來源

2017-06-17 16:08:14

如何在反應應用程序中@import CSS？

回答

相關問題