Ottenere uscita css usando webpack ExtractTextPlugin

Io sto cercando di ottenere CSS richiede di lavorare in webpack utilizzando l'ExtractTextPlugin ma senza successoOttenere uscita css usando webpack ExtractTextPlugin

Voglio un file CSS separato piuttosto che inlining qualsiasi css.

Ecco il mio webpack config:

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './scripts/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js', 
    publicPath: '/scripts/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new ExtractTextPlugin('styles/styles.css', { 
     allChunks: true 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel'], 
     include: path.join(__dirname, 'scripts') 
    }, 
    { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader') 
    }] 
    } 
};

index.js:

import React from 'react'; 
import App from './App'; 

React.render(<App />, document.getElementById('root'));

App.js:

import React from 'react'; 

require('../styles/app.css'); 

export default class App extends React.Component { 
    render() { 
    return (
     <h1>Hello, world.</h1> 
    ); 
    } 
}

index.html:

<html> 
    <head> 
    <link rel="stylesheet" href="/styles/styles.css"> 
    </head> 
    <body> 
    <div id='root'></div> 
    </body> 
    <script src="/scripts/bundle.js"></script> 
</html>

styles.css restituisce 404

Qualsiasi idea di cosa potrebbe andare storto qui. Se io non uso l'ExtractTextPlugin e solo fare questo in config:

module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    }

tanto sono il css applicato alla pagina correttamente, ma ovviamente questo non proviene da un file CSS

Questo è il mio primo tentare di usare il webpack così probabilmente facendo qualche errore di noob

Qualche idea?

fonte

2015-04-19 jamie holliday

Sono riuscito a farlo funzionare con font-awesome-webpack ma ho anche problemi con i CSS. https://www.npmjs.com/package/font-awesome-webpack#extract-text-webpack-plugin –

È possibile impostare un progetto autonomo (ad esempio GitHub) per lo studio? –

Puoi contrassegnare una risposta come accettata o descrivere cosa non funziona? – matpie

ExtractTextPlugin deve essere aggiunto in due punti: nel Caricatore e come Plugin. Ecco l'esempio estratto da stylesheets documentation.

// webpack.config.js 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
module.exports = { 
    // The standard entry point and output config 
    entry: { 
     posts: "./posts", 
     post: "./post", 
     about: "./about" 
    }, 
    output: { 
     filename: "[name].js", 
     chunkFilename: "[id].js" 
    }, 
    module: { 
     loaders: [ 
      // Extract css files 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
      }, 
      // Optionally extract less files 
      // or any other compile-to-css language 
      { 
       test: /\.less$/, 
       loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") 
      } 
      // You could also use other loaders the same way. I. e. the autoprefixer-loader 
     ] 
    }, 
    // Use the plugin to specify the resulting filename (and add needed behavior to the compiler) 
    plugins: [ 
     new ExtractTextPlugin("[name].css") 
    ] 
}

fonte

2015-07-16 19:25:00 matpie

Nelle versioni più recenti, prende solo un oggetto come parametro: 'ExtractTextPlugin.extract ({fallback:" style-loader ", usa:" css-loader "})' ([docs] (https://github.com/) webpack-contrib/extract-text-webpack-plugin # estratto)) –

non ha funzionato per me. –

*** { contesto: __dirname + '/ app', ingresso: { app:' ./index.js', fornitore: [ 'angolare', ...]} , uscita: { percorso: __dirname + '/ app// bundle js /', filename: 'bundle.js' }, modulo: { regole: [ { prova: /\.css$/, caricatore: ExtractTextPlugin. estrai ({fallback: "style-loader", usa: "css-loader"}) } ] }, plugins: [ nuovo webpack.optimize.CommonsChun kPlugin ({nome: 'vendor', nome file: 'vendor.bundle.js'}), new ExtractTextPlugin ("[nome] .css") ]}; *** –

Ho modificato i nomi dei file di configurazione e come li si include nella pagina

var path = require('path'); 
    var webpack = require('webpack'); 
    var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './scripts/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'scripts/bundle.js', 
    publicPath: '/scripts/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new ExtractTextPlugin('styles/styles.css', { 
     publicPath: '/styles/', 
     allChunks: true 
    }) 
    ], 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel'], 
     include: path.join(__dirname, 'scripts') 
    }, 
    { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader') 
    }] 
    } 
};

che segue è la pagina html

<html> 
    <head> 
    <link rel="stylesheet" href="build/styles/styles.css"> 
    </head> 
    <body> 
    <div id='root'></div> 
    </body> 
    <script src="build/scripts/bundle.js"></script> 
</html>

fonte

2015-09-16 23:47:11 Kishorevarma

Voglio convertire .svg in file di font qualcuno mi può aiutare – Rohitesh

@Rohitesh -> Carica svg a https://icomoon.io/app/ genererà un font con css per le icone. –

Ecco un webpack.config.js che funziona. Non uso gli stessi nomi di directory che fai, ma penso che tu possa vedere le differenze e apportare le modifiche necessarie. Sto anche includendo le mie versioni attuali del modulo.

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const config = { 
    entry: './src/index.js', 
    output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'bundle.js', 
    publicPath: 'build/' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/ 
     }, 
     { 
     loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'}), 
     test: /\.css$/ 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { limit: 40000 } 
      }, 
      'image-webpack-loader?bypassOnDebug' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({filename: 'style.css', 
     allChunks: true 
    }) 
    ] 
}; 

module.exports = config;

// e moduli:

"devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^6.4.1", 
    "babel-preset-env": "^1.3.3", 
    "css-loader": "^0.28.0", 
    "extract-text-webpack-plugin": "^2.0.0-beta.4", 
    "file-loader": "^0.11.1", 
    "image-webpack-loader": "^3.3.0", 
    "style-loader": "^0.16.1", 
    "url-loader": "^0.5.8", 
    "webpack": "^2.2.0-rc.0" 
    }

fonte

2017-04-27 18:51:25

Uso css-loader e style-loader insieme prima analizza il CSS, lo trasforma in nodi di stile, che possono essere importati in Webpack proprio come codice. Non capisco perché vorresti creare questa relazione artificiale tra il tuo JavaScript e il tuo CSS.

L'approccio precedente emette nuovamente CSS alla fine. Perché mettere il tuo codice in un viaggio di andata come quello? Utilizzare raw-loader e aggiungere il file CSS principale ai punti di ingresso. Si perde qualsiasi errore-controllo che esegue css-loader, ma la compilazione avviene molto più velocemente. Ma se stai usando qualcosa come sass-loader, continuerai comunque a controllare tutti gli errori.

fonte

2017-07-07 21:07:00

Ottenere uscita css usando webpack ExtractTextPlugin

risposta

Problemi correlati