Есть ли способ использовать мои стили в качестве внешнего файла CSS в реакции? - PullRequest
Новая
       1

Есть ли способ использовать мои стили в качестве внешнего файла CSS в реакции?

0 голосов
/ 07 февраля 2019

Возможно, это будет звучать глупо, но я бы хотел использовать SCSS в своем приложении React для стилизации.Я знаю, что React "прочитает" все мои стили и сгенерирует их в отдельных тегах <style> в разделе <head>.Я уже eject это приложение и настраиваю файл webpack.config для использования scss.

Есть ли способ (или лучшая практика) использовать их в качестве внешнего файла css?

это то, что я хотел бы получить 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="mystyles.css" />
    .
    .
    .

вместо этого 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <style> <!-- my styles --> </style>
    <style> <!-- my styles --> </style>

Так что я хотел бы иметь один mystyles.scssфайл, который содержит все мои другие scss файлы, такие как:

mystyles.scss 

@import variables.scss;
@import components.scss;

, и React создаст внешний файл css, и когда яизмените любые стили, приложение create-реагировать-приложение будет жить, перезагрузите его.

Редактировать

Я хотел бы использовать реакцию таким образом, потому что, на мой взгляд, легче отлаживать стили с помощью инструмента Chrome Inspect.Он может показать мне, какой файл scss имеет этот стиль.

Но если у вас есть лучшее решение для отладки scss в React, я открыт для этого!

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Вы сможете получить ссылки на свои файлы SCSS из инструментов разработчика, поместив их в файл конфигурации вашего веб-пакета: 

devtool: 'source-map',

Однако, если вам все равно нужен отдельный файл CSS, вы такженужно использовать Webpack ExtractTextPlugin.В разделе module.rules конфигурации webpack вам понадобится что-то вроде этого: 

{
    test: /\.scss/,
    use: ExtractTextPlugin.extract( {
        fallback: 'style-loader',
        use: [
            "css-loader",
            "sass-loader"
        ]
    } )
},
plugins: [
    new ExtractTextPlugin( { filename: 'style.css', allChunks: true} )
]

Загрузчик sass преобразует файлы scss в css, а ExtractTextPlugin берет CSS и помещает его вотдельный файл, как определено в конфигурации плагина.

0 голосов
/ 07 февраля 2019

Поскольку последняя версия CreateReactApp уже поддерживает импорт sass, 

install node-sass

import "./mystyle.scss"; // add to app.js top.

без использования CRA, вам нужно обработать из веб-пакета 

npm install sass-loader node-sass webpack --save-dev

npm install style-loader css-loader --save-dev

и добавить его в файл конфигурации веб-пакета. 

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...