如何在組件的SCSS文件目錄中引用？

目前，我有以下目錄結構：如何在組件的SCSS文件目錄中引用？

stylesheets 
..modules 
...._all.scss 
...._colors.scss 
..partials 
...._all.scss 
...._Home.scss 
..main.scss

在我_Home.scss我：

@import '../modules/all'; 

.headerStyle { 
    color: pink; 
    font-size: 15; 
    font-weight: 500; 
}

在我main.scss我導入所有的_all.scss在樣式表文件夾，如：

@import 'modules/all' 
@import 'partials/all' 

html { font-family: 'Roboto', sans-serif; } 
body { 
    margin: 0; 
    background-color: orange 
}

最後在我的組件中，我會像這樣導入樣式表：

import '../../stylesheets/main.scss' 

... 

<div className="headerStyle">Header</div>

然而，DIV沒有被用在.headerStyle風格_Home.scss。我檢查了目錄路徑main.scss，它是正確的，我沒有得到任何錯誤。

而且實際上是被應用於以下：

body { 
    margin: 0; 
    background-color: orange 
}

什麼可能我是做錯了什麼？是否有更好的方式將樣式表導入到組件中，而不必每次爲組件定義它？

預先感謝您，並會upvote /接受答案。

來源

2017-01-19 Jo Ko

你導入'_Home.scss'成'諧音/ _all.scss'？ '@import'Home'' – inostia

首先，它是'@import'modules/all''中的一個錯字嗎？不應該是'_all'？其次，'_all.scss'文件的內容是什麼？ –

我試過成功地追蹤（使用普通的HTML和Scout-App到SCSS轉換成CSS）：

編輯：提到我從來沒有用過反應，而是基於對這個職位hugogiraudel.com它應該是相同的語法在我的解決方案（或多或少/一見鍾情;-)）。

編輯2：我幾天前開始使用SCSS自己。據我可以告訴你唯一的錯誤是我的例子中顯示的幾個錯字。由於應用了「body」，我假設組件中的import語句對React是正確的。

如果有更好的解決方案來導入組件必須由其他人回答。但它看起來像鏈接的博客文章的作者有另一種方法，並且還有一個可用的github存儲庫。

目錄結構：

- project_folder 
    - index.html 
    - stylesheets 
     - main.scss 
     - partials 
      - _all.scss 
      - _Home.scss

的index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <!-- NOTE: 'css_stylesheets' is the folder where the 
        Scout-App added the transformed CSS files --> 
     <link rel="stylesheet" href="css_stylesheets/main.css" type="text/css" /> 
    </head> 
    <body> 
     <!-- NOTE: I don't know anything about React but 
        in HTML the attribute is 'class' not 'className' 
        Edit 3: 'className' is correct, my bad --> 
     <div class="headerStyle">Header</div> 
    </body> 
</html>

樣式表/ main.scss

@import 'partials/all'; // Your missing here a semicolon (;) I think 

html { font-family: 'Roboto', sans-serif; } 
body { 
    margin: 0; 
    background-color: orange; // here too but wasn't crucial 
}

樣式表/分音/ _all.scss

@import '_Home.scss';

stylesheets/partials/_Home。SCSS

.headerStyle { 
    color: pink; 
    font-size: 30px; // I added here pixels because Firefox ignored it otherwise 
    font-weight: 500; 
}

來源

2017-02-01 00:27:37

實際上是在http://www.material-ui.com/#/components/table的中嘗試它，如「，但不起作用。 –

是否有反正你可以提供React的呈現的HTML？如果您使用'style'屬性來設置的樣式，它會工作嗎？ –

基於材料 - ui文檔和這篇文章[stackoverflow.com]（http://stackoverflow.com/questions/35053163/material-ui-table-how-to-make-style-changes-to-table-elements ）內聯樣式可能是你的問題。但現在只是爲我猜測。如果這不是一個更有經驗的人需要接管的問題;-) –

您已經配置的WebPack使用stylesheets目錄，所以你可以使用

import 'main.scss'

，而不是

import '../../stylesheets/main.scss'

來源

2017-02-01 08:48:02 fingerpich

它說不能解決模塊'main.scss' –

@fingerpich偶然發現了一種讓你的路簡單一個很好的解決方案。您可以設置別名，將樣式表目錄，然後總是相對於該目錄中導入：

的WebPack配置：

{ 
    resolve: { 
    alias: { 
     // the path needs to resolve relative to the files where you're importing them 
     stylesheets: path.resolve(__dirname, '../stylesheets') 
    } 
    } 
}

文檔：https://webpack.github.io/docs/configuration.html#resolve-alias

組件文件：

import 'stylesheets/main.scss'

您還可以讓webpack通過在路徑的前面添加〜來解析sass文件中的導入內容。然後，你可以寫你的進口出現就像在你的組件文件，他們會解決你的別名：

@import '~stylesheets/modules/_colors.scss'

文檔：https://github.com/jtangelder/sass-loader#imports

來源

2017-02-03 06:32:22 shadymoses

在整體的代碼，您所提供的只有一件事是半失蹤-colon（;）使用SCSS時，我們必須使用分號來終止語句。

下面是更新後的代碼：

@import 'modules/all'; 
@import 'partials/all'; 

html { font-family: 'Roboto', sans-serif; } 
body { 
    margin: 0; 
    background-color: orange; 
}

來源

2017-02-07 12:37:42

如何在組件的SCSS文件目錄中引用？

回答

相關問題