webpack-style-loader

问题 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(

问题 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 '.

问题 I am attempting to make a React application that I am developing isomorphic. One of the known problems with doing this is that webpack loaders allow import/require of non-javascript assets such as CSS files. e.g. // ExampleComponent.jsx import Select from 'react-select'; import 'react-select/dist/react-select.css'; If building an application with Express then node will get to this import and fail because it can not process a CSS file, it is expecting javascript only (and thanks to babel

问题 This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it? Googling around provides little to no help unfortunately. Here's my webpack config: const ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require("webpack"); module.exports = { entry: { dashboard: './js/main.js', vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",], }, output: { path: "../public",

问题 This WARNING is printed ~20 times when running webpack - it processes and bundles just fine, but what does it mean? How do I get rid of it? Googling around provides little to no help unfortunately. Here's my webpack config: const ExtractTextPlugin = require("extract-text-webpack-plugin"); var webpack = require("webpack"); module.exports = { entry: { dashboard: './js/main.js', vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis",], }, output: { path: "../public",

问题 My webpack config specifies that fonts should be loaded using url-loader , and when I try to view the page using Chrome I get the following error: OTS parsing error: invalid version tag Failed to decode downloaded font: [My local URL] The relevant parts of my config look like this: { module: { loaders: [ // ... { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'], }, { test: /images\/.*\.(png|jpg|svg|gif)$/, loader: 'url-loader?limit=10000&name="[name]-

问题 I'm writing an isomorphic React app based on : https://github.com/choonkending/react-webpack-node Instead of css modules used in the examples I'd like to use scss though. And for some reason I'm having a really hard time getting them to work. My first step was to remove the css webpack loaders from both the server and the client configs replacing them with scss -specific loaders (as well as removing postcss ) : loaders: [ 'style-loader', 'css-loader?modules&localIdentName=[name]_[local]_[hash

问题 Below is my webpack.config.js and the package.json module.exports = { entry: "./entry.js", output: { filename: "./build/js/bundle.js" }, module: { rules: [ { test: /.\js$/, use: [ { loader: 'babel-loader', options: { presets: ["es2015"] } } ] }, { test: /.\css?$/, include: __dirname + "./src/css", exclude: __dirname + "./src/js", use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] } ] }, plugins: [ // new UglifyJsPlugin() ] } "dependencies": { "ajv-keywords": "^3.1.0

问题 I'm writing a client-side app that is using Webpack, and I cannot figure out how to require the materialize-css package. I'm using Henrik Joreteg's hjs-webpack package, and with this the yeticss npm package is included by doing an import in a sass file (e.g. @import 'yeticss' ), but this doesn't work for materialize. Requiring it straight up in the code (e.g. import 'materialize-css' in a JS file) like any other package also doesn't work. 回答1: In this case, unlike with yeticss, you need to go

问题 I am trying to understand some trick with webpack. I explain. What i have ? My archi is like : www - css/ - folder/ - some.src.less - other.less - cssOther/ - t.src.less - subFolder/ - t.less My archi is like this. What i want to do is to just compile *.src.less and send them to dist and keep their path and name folder. My actual webpack config. First is it obligatoy needed to use a .js entry ? (i dont need it actually) I am working on it if I found something interesting i will update here