CODEWITHSUNDEEP
cssreactjsnpmsass
cs.matyi
cs.matyi

Reputation: 1264

Is there a way to use my styles as an external css file in react?

Maybe it will sound dummy but I would like to use SCSS in my React app for styling. I know that React will "read" all my styles and generate them in separate <style> tags in the <head> section. I already eject this app and configure the webpack.config file to use scss.

Is there a way (or best practice maybe) to use them as an external css file?

this is what i would like to get

<!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" />
    .
    .
    .

instead of this

<!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>

So I would like to have one mystyles.scss file which contains all my other scss files like this:

mystyles.scss

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

and React will generate an external css file and when I modify any styles, the create-react-app cli will live reload it.

Edit

I would like to use react like this, because in my opinion it is easier to debug the styles with chrome inspect tool. It could show me which scss file has this style.

But if you have a better solution for debugging scss in React, I'm open for it!

Upvotes: 0

Views: 376

Answers (2)

slash_rick_dot
slash_rick_dot

Reputation: 923

You should be able to get references to your SCSS files from developer tools by placing this in your webpack config file:

devtool: 'source-map',

However, if you want a separate CSS file anyway, then you will also need to use the Webpack ExtractTextPlugin. Within the module.rules section of the webpack config, you'll need something like this:

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

The sass-loader converts the scss files to css, and the ExtractTextPlugin takes the CSS and places it in a separate file, as defined by the plugin config.

Upvotes: 0

max li
max li

Reputation: 2457

With latest CreateReactApp already supporting importing sass, 

install node-sass

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

without using CRA you need to handle from webpack

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

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

and add this to your webpack config file.

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
            ]
        }]
    }
};

Upvotes: 3

Related Questions