webpack-style-loader

css-loader not importing .css file returning empty object

﹥>﹥吖頭↗ 提交于 2019-12-06 23:45:54
问题 Importing style from css files. Returning empty object. Seems css-loader is not working correctly. Can anyone help me on this. Please find the reference files below index.js import React from 'react' import style from './header.css' console.log(style) // Returning empty object export default class Header extends React.PureComponent { render() { return( <header className = {style.header}> This is header component </header> ) } } ./header.css .header { background: #007DC6; } ./webpack.config.js

How do you use withStyles (isomorphic style loader) when your className has a dash in it?

青春壹個敷衍的年華 提交于 2019-12-06 12:41:52
问题 Let's say this is your SCSS: .someclass { background: red; height: 1500px; width: 10000px; } And this is how you use it: import React, { Component, PropTypes } from 'react' import ReactDropZone from 'react-dropzone' import ReactDOM from 'react-dom' import withStyles from 'isomorphic-style-loader/lib/withStyles' import s from './ImageTool.scss' class ImageTool extends Component { render() { return ( <div className={s.someclass}></div> ) } } export default withStyles(ImageTool, s) So this works

Webpack + React + Loading CSS of external modules

那年仲夏 提交于 2019-12-06 06:25:33
Webpack/CSS Experts! My NodeJS/React application has the following structure, where I use Webpack 3.8.1 to package & bundle files. -app |--actions |--constants |--components |--containers |--css |--reducers |--store -common -server -webpack |--rules |--css |--javascript |--externals |--paths |--resolve |--webpack.config.js Everything works as expected in development and production but there is one problem that I have been struggling with: External node modules CSS . When I add a new dependency, which comes with some sort of CSS/SCSS/SASS stylesheets and for that matter makes use of className

Webpack2 loading and extracting LESS file

£可爱£侵袭症+ 提交于 2019-12-06 01:29:47
I am trying to setup Webpack2 to process my LESS files and create a separate CSS from it. I keep getting an error however. I've had trouble locating Webpack2 examples outlining the process so not sure what I am missing. My Webpack config: module.exports = { entry: { 'public': [ './src/client/styles/public.js' ] }, output: { ... }, module: { { test: /.*\.less$/, loader: ExtractTextPlugin.extract({ loader: 'less-loader', fallbackLoader: 'style-loader' }) } ] }, plugins: [ new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }) ] } The public.js file (I also tried

Cant Import CSS files into React Project

江枫思渺然 提交于 2019-12-06 00:00:41
when i tried to import css file it showed error that loaders are missing. so i have installed css-loader and style-loader packages. if i add those packages to webpack.config.js i get following error. i dont know how to resolve it. ERROR in ./node_modules/css-loader!./src/index.js Module build failed: Unknown word (1:1) > 1 | import React from 'react'; | ^ 2 | import ReactDOM from 'react-dom'; 3 | import {App} from './components/App'; 4 | @ ./src/index.js 3:14-73 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js Webpack.config.js module.exports = { entry: [ './src/index

Angular2/Webpack: how to load fonts that are imported inside css files?

核能气质少年 提交于 2019-12-05 21:09:41
I'm using Angular2 beta.15 and webpack 1.12.14. I have one .css and one .scss file in app.component.ts as global patterns like this. @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', styles: [ require('../stylesheets/css/main.min.css'), require('../sass/example.scss') ], encapsulation: ViewEncapsulation.None, }) And, inside .css file, some fonts are imported like below, @font-face { font-family: 'Helvetica Neue'; src: url(fonts/light/helvetica-neue-light.eot) format("eot"), url(fonts/light/helvetica-neue-light.woff2) format("woff2"), url(fonts/light/helvetica-neue-light

Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?

左心房为你撑大大i 提交于 2019-12-05 18:06:29
问题 My problem is that if I don't specify the complete domain in output.publicPath config option; then the url don't load properly (at least fonts). My webpack config: output: { ... publicPath: '/assets/' }, module: { loaders: { { test: /\.less$/, loader: "style!css?sourceMap!less?sourceMap" }, { test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/, loader: 'file-loader?name=[path][name]-[hash].[ext]' } } }, debug: true, devtool: 'eval' I have a less file that states: @font-face { font-family: 'new-sources'

Testing Webpack built React components with Jest

牧云@^-^@ 提交于 2019-12-05 07:15:19
I have come across a problem where I need to run Jest tests on a React application that is being built by Webpack. The problem is handling the require of CSS files and images etc that Webpack would usually process with a loader. I need to know about what is the best approach to test my components correctly. The React component: import React from 'react'; // The CSS file is the problem as I want to actually test what it // returns after webpack has built it. import style from './boilerplate.css'; var Boilerplate = React.createClass({ render: function() { return ( <div> <h1 className={style

css-loader not importing .css file returning empty object

╄→гoц情女王★ 提交于 2019-12-05 05:12:27
Importing style from css files. Returning empty object. Seems css-loader is not working correctly. Can anyone help me on this. Please find the reference files below index.js import React from 'react' import style from './header.css' console.log(style) // Returning empty object export default class Header extends React.PureComponent { render() { return( <header className = {style.header}> This is header component </header> ) } } ./header.css .header { background: #007DC6; } ./webpack.config.js { test: /\.css$/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader'], }, { test: /\.css$

How to ensure that hot CSS loads before JS in webpack-dev-server?

雨燕双飞 提交于 2019-12-05 03:32:47
I'm using webpack-dev-server to hot load all of my assets including CSS. Currently though, my CSS loads after the JavaScript which causes my application issues in some places that depend on layout existing. How can I ensure that the CSS loads before the JavaScript executes? I'm thinking there must be a way to do this from module , perhaps a a callback I could hook in to? Or maybe by configuring the style-loader to have priority? This is my index.js: import './styles/main.scss'; import './scripts/main.js'; if (module.hot) { module.hot.accept(); } and this is my styles loader: { test: /\.(scss)$