Как ссылаться в каталоге файла 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
}

Что я могу делать неправильно? И есть ли лучший способ импортировать таблицы стилей в компонент, а не определять его каждый раз для компонента?

Благодарим вас заблаговременно и ответим/принимаем ответ.

Ответ 1

Я успешно выполнил следующее (используя простой HTML и Scout-App, чтобы преобразовать SCSS в CSS):

Изменить: Как уже упоминалось, я никогда не использовал React, но на основе этого сообщения hugogiraudel.com он должен быть того же синтаксиса, что и в моем решение (более или менее/с первого взгляда;-)).

Изменить 2: я начал использовать SCSS всего несколько дней назад сам. Насколько я могу судить, ваши единственные ошибки - это несколько опечаток, показанных в моем примере. Поскольку применяется "тело", я предполагаю, что оператор 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';

таблиц стилей/обертоны/_Home.scss

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

Ответ 2

Вы настроили Webpack для использования каталога stylesheets, чтобы вы могли использовать

import 'main.scss'

вместо

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

Ответ 3

@fingerpich попал в хорошее решение для упрощения ваших путей. Вы можете настроить псевдоним в свой каталог stylesheets, а затем всегда импортировать его относительно этого каталога:

Конфигурация 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

Ответ 4

В общем коде, которому вы предоставили только одну вещь, отсутствует точка с запятой (;) При использовании SCSS мы должны использовать полуточку, чтобы завершить утверждение.

Вот обновленный код:

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

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