DeprecationWarning: Module Chunks about sass-extract-js HOT 8 CLOSED

I did some digging on this tonight. I believe the problem comes from importing sass-extract since it is not meant to be run in the browser. (It relies on node-sass which relies on fs which doesn't exist in the browser.)

The correct way to make it work (assuming you are also using webpack) is to use sass-extract-loader. Here's an example:

import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import logo from './logo.svg';
import './App.css';

const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!./vars.scss');

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

I'll have to update the documentation to reflect this.

from sass-extract-js.

same here. Any news regarding this?

from sass-extract-js.

Thanks @adamgruber 🙂. I just checked and your suggestion works really good with Next.js. If anyone is interested about it here's a basic starter kit repo combining bootstrap scss variables with styled-components.

from sass-extract-js.

@adamgruber Thank you for your quick response!

@dgonzalezr Where is the beginning of the path to the variables file? from the project root directory? Or from the file where that instruction is being written?

Any way, i got this:
This dependency was not found:

• sass-extract-loader?{
  "plugins": ["sass-extract-js"]
  }!./src/assets/styles/global/_settings.scss in ./src/layouts/index.jsx

To install it, you can run: npm install --save sass-extract-loader?{
"plugins": ["sass-extract-js"]
}!./src/assets/styles/global/_settings.scss

(I'm using gatsbyjs not next.js, but I would assume the process would be similar)

from sass-extract-js.

@JoaoTMDias you can see my setup in this repo.

I'm using Next.js. I'd put the code in an index.tsx file which wrap my entire app and is a level up from where my /scss folder is.

└── pages
    └── index.tsx
└── src
    └── app
    └── scss
        └── bootstrap
            └── _variables.scss
        └── _default.scss
        └── main.scss

So, I have the following:

const theme = require(`sass-extract-loader?{
    "plugins": ["sass-extract-js"]
}!../src/scss/bootstrap/` + '_variables.scss');

Hope it helps you 🙂

from sass-extract-js.

@JoaoTMDias Did you make sure to npm install sass-extract-loader?

from sass-extract-js.

@adamgruber I think it is something related with the path to the *.scss file. I got the same until I finally set it correctly 😉

from sass-extract-js.

What if you aren't using webpack? I am using a gulp compiling process. Is there anyway to use this library with that?

from sass-extract-js.