Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style Loader #188

Open
ajhool opened this issue Mar 24, 2017 · 11 comments
Open

Style Loader #188

ajhool opened this issue Mar 24, 2017 · 11 comments

Comments

@ajhool
Copy link

ajhool commented Mar 24, 2017

Any interest in adding a css style loader to webpack by default? I believe the dependency is:

npm install --save-dev css-loader

With the most basic rule added to webpack.config.js :

      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
@ajhool
Copy link
Author

ajhool commented Mar 24, 2017

Actually, the above code was only working in storybook, but it seems to be a far more complicated task to properly import css and scss into the isomorphic framework. CSS import seems to be a bleeding edge issue and I haven't found a successful configuration for this framework yet. Has anybody else had luck?

@mininternet
Copy link

mininternet commented Mar 25, 2017

I installed the following dependencies, and then added them to webpack.config.js -

      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!resolve-url-loader!sass-loader?sourceMap'
      }

And in the component files, i use ES5 requires, to import the scss file.

@mrsteele
Copy link

FYI this is exclusively an issue with the server aspect of getting the stylesheet.

I sort of ran into this problem as well, and was able to get it working by doing the following:

if (typeof window === 'object') {
  require('./styles.css')
}

But as you probably know, that means server-side rendering wont happen. My pages had a brief period where no styles were displayed, and then they showed up after initial load.

Back to the drawing board!

@protoEvangelion
Copy link
Contributor

@ajhool Do you mean adding css modules functionality along with styled-components?

Also, I'm not too certain if this will have an impact, but it looks like the react-router v4 pull is going to be merged soon, so the way you hook this up to server rendering may change as well.

@EricWVGG
Copy link

EricWVGG commented Nov 6, 2017

I am attempting to load the CSS for the https://github.com/davidchin/react-input-range component. I have followed @mininternet’s suggestion to install dependencies and add to the webpack, but I am unsure whether this belongs in the babel set, the assets set, or …?

Either way, I get this message:

ERROR in ./~/react-input-range/lib/css/index.css
Module parse failed: /Users/username/sites/myProject/node_modules/react-input-range/lib/css/index.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .input-range__slider { // more CSS follows

Any advice would be greatly appreciated.

@mininternet
Copy link

This sounds to me like an issue with that particular package, rather than the webpack loaders.

@EricWVGG
Copy link

EricWVGG commented Nov 9, 2017

I can't rule that out, but I also still don't know whether these webpack rules go in Babel, Assets, something else, and I have had no luck with other components to boot.

@mininternet
Copy link

@EricWVGG - they go in webpackconfig.js. I've updated my comment above to reflect that. But this is really more a webpack configuration issue rather than anything to do specifically with ARc.

@EricWVGG
Copy link

EricWVGG commented Nov 9, 2017

"I have followed @mininternet’s suggestion to install dependencies and add to the webpack, but I am unsure whether this belongs in the babel set, the assets set"

const babel = () => () => ({
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
    ],
  },
})

const assets = () => () => ({
  module: {
    rules: [
      { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' },
    ],
  },
})

@sasajib
Copy link

sasajib commented Jan 27, 2018

Successfully able to add like this,

npm install --save-dev style-loader css-loader sass-loader node-sass
or
yarn add -D style-loader css-loader sass-loader node-sass

in webpack.config.js file edit

const assets = () => () => ({
  module: {
    rules: [
      {test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']},
      { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' }
    ],
  },
})

hope this help others, thx and keep up the good work

@pgrekovich
Copy link

@sasajib but it's will not work with isomorphic app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants