コンポーネントから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>

には、.headerStyleで区切られていません。私はmain.scssへのディレクトリパスをチェックして、それは正しいです、そして、私はどんなエラーも得ていません。

、実際に適用されている次：私が間違って何をしていることができ

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

？そして、コンポーネントのたびに定義するのではなく、コンポーネントにスタイルシートをインポートするより良い方法がありますか？

ありがとうございますupvote /応答を受け入れます。

出典

2017-01-19 Jo Ko

あなたは 'パーシャル/ _all.scss'に' _Home.scss'をインポートする：ここで

が更新されたコードのですか？ '@import 'Home'' – inostia

まず、' @import' modules/all''のtypoですか？それは '_all'であってはなりませんか？第二に、 '_all.scss'ファイルの内容は何ですか？ –

私は（CSSにSCSSを変換するために、プレーンHTMLとScout-Appを使用して）に成功し、次を試してみました：

編集：言及したように私は反応使ったことがないが、この記事をもとにhugogiraudel.comそれは同じ構文でなければなりません私の解決策（多かれ少なかれ/最初の視力;-)）。

編集2：私はちょうど数日前にSCSSを使い始めました。あなたの唯一の誤りは、私の例で示されたいくつかのタイプミスです。 'body'が適用されているので、コンポーネントのimport文がReactに対して正しいと仮定します。

コンポーネントへのインポートを行うためのより良い解決策がある場合は、他の人が回答する必要があります。しかし、リンクされたブログ記事の作成者にはもう1つのアプローチがあり、利用可能な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';

スタイルシート/部分/ _ホーム。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'属性を使用すると機能しますか？ –

マテリアルユーザマニュアルとこの投稿に基づいて[この記事の投稿記事を読む] http://stackoverflow.com/questions/35053163/material-ui-table-how-to-make-style-changes-to-table-elementsインラインスタイルが問題になる可能性があります。しかし、それは今私のために推測しているだけです。これが問題ではない場合は、経験豊富な人がここに引き継がなければならない;-) –

は、あなたが代わりにあなたのパスがシンプルな作りに適したソリューションでヒット@fingerpich

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

出典

2017-02-01 08:48:02 fingerpich

モジュール 'main.scss' –

の

import 'main.scss'

を使用することができるようにstylesheetsディレクトリを使用するようにWebPACKのを設定しました。コンフィグ

の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ファイルのディレクトリを参照する方法は？

答えて

関連する問題