如何導入CSS文件上同構反應 - Webpack

我想創建一個同構反應應用程序使用快遞，反應和webpack。如何導入CSS文件上同構反應 - Webpack

一切正常，直到我導入一個CSS文件在我的組件之一。我明白節點不能處理這個導入，但有人可以解釋這個包在github上如何允許他們的組件有一個CSS導入線？

https://github.com/kriasoft/react-starter-kit

我想提出我的項目相似。渲染組件時，它們是否有任何讓服務器忽略該行的行？

這是錯誤我得到

SyntaxError: /home/USER/Code/shared/general/ru/src/components/MainPage/MainPage.scss: Unexpected token (1:1) 
> 1 | @import '../variables.scss'; 
    |^
    2 | 
    3 | .MainPage { 
    4 | background-color: $primary-color; 
    at Parser.pp.raise (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/location.js:24:13) 
    at Parser.pp.unexpected (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/util.js:82:8) 
    at Parser.pp.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:425:12) 
    at Parser.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/plugins/jsx/index.js:412:22) 
    at Parser.pp.parseExprSubscripts (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:236:19) 
    at Parser.pp.parseMaybeUnary (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:217:19)

來源

2015-11-02 namenamesoseji

你需要另一個裝載機使CSS /風格裝載機工作。

https://www.npmjs.com/package/webpack-isomorphic-tools

不過的WebPack僅用於客戶端代碼開發製作：它會找到所有需要（）調用你的代碼中，並與各種魔法，使事情的工作替換它們。如果你嘗試在Webpack之外運行相同的源代碼 - 例如，在Node.js服務器上 - 你會得到大量帶有意外令牌的語法錯誤。這是因爲在Node.js服務器上沒有Webpack require（）魔法發生，並且它只是試圖將所有「資產」（樣式，圖像，字體，OpenGL着色器等）（如果它們是適當的JavaScript編碼模塊因此錯誤消息。

祝你好運！

編輯：

我想你也想看到這個問題。 Importing CSS files in Isomorphic React Components

來源

2015-12-05 15:29:44 Shouichi

-2

也許你沒有在瀏覽webpack配置中使用sass loader。

嘗試安裝此裝載機： Sass loader

的WebPack配置的實例：

module.exports = { 
    ... 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
     } 
    ] 
    } 
    sassLoader: { 
    includePaths: [path.resolve(__dirname, "./some-folder")] 
    } 
};

我也建議你使用postcss申請autoprefixer！

來源

2015-12-05 18:39:49

的OP使用此提到的項目： https://github.com/kriasoft/isomorphic-style-loader

所以，是的，另一個裝載機+接口插入和使用的樣式。

來源

2016-01-08 23:08:06

是的，它確實使用它，但爲什麼namenamesoseji得到這個錯誤？ 'isomorphic-style-loader'應該能夠在服務器端和客戶端工作。看來他的代碼還沒有被transpilled，但他怎麼能得到它在服務器端transpilled？ – SudoPlz

如何導入CSS文件上同構反應 - Webpack

回答

相關問題