Open ee7klt opened 8 years ago
Yes, it is. Unfortunately there is no way to modify the webpack configuration with required node module. You need to handle manually the CSS
files in your webpack.config
, for example like this:
module.exports = {
// ...
module: {
loaders: [
// ...
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css") }
// ...
]
}
// ...
}
These days will add a real example how to use it.
If you are experienced with webpack
it is just adding this module as dependency and voila.
yes, i am using style-loader and css-loader (although i'm not using extractextplugin because i need hmre). will this not work?
loaders: [ { test: /\.css$/, loaders: ['style', 'css'], include: PATHS.app },
Hmmm ... need to check how it will work without extracttext
.
For me it works very well and creates a separate vendors.css
& vendors.css.map
in which it packs all the third party CSS files. But the webpack.config
a is bit complicated, so I didn't put it as example here. But anyway here it is - may be it will help you:
var path = require("path");
var webpack = require("webpack");
var merge = require("webpack-merge");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanPlugin = require('clean-webpack-plugin');
var PATH = {
WWW: path.resolve(__dirname, "web"),
BUILD: path.resolve(__dirname, "build")
};
var common = {
resolve: {
extensions: ["", ".js"],
modulesDirectories: [
"node_modules",
PATH.WWW,
path.resolve(PATH.WWW, "css"),
path.resolve(PATH.WWW, "images")
]
},
entry: {
app: [
"style.css",
path.resolve(PATH.WWW, "index.js")
],
vendors: [
"es5-shim",
"jquery",
"webpack-material-design-icons",
"webpack-md-messagebox",
"webpack-md-coverbox",
"angular-ui-router",
"angular-material-data-table",
"angular-material-data-table/dist/md-data-table.min.css",
"angular-input-modified",
"feathers-client",
"socket.io-client"
]
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js",
chunkFilename: "[name].js"
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css") },
{ test: /\.json$/, loader: "json" },
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
{ test: require.resolve("feathers-client"), loader: "expose?feathers" },
{ test: require.resolve("socket.io-client"), loader: "expose?io" }
]
},
plugins: [
new CleanPlugin([path.resolve(__dirname, "build")]),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ["vendors", "manifest"]
})
]
};
var debug = {
module: {
loaders: [
{
test: /\.html$/,
loader: "ngtemplate?module=Dashboard&relativeTo="+path.resolve(__dirname, "web")+"/!html",
exclude: path.resolve(__dirname, "web/index.html")
},
{ test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/, loader: "file?name=[name].[ext]" }
]
},
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(PATH.WWW, "index.html")
}),
new ExtractTextPlugin("[name].css")
]
};
var release = {
output: {
filename: "[name].[chunkhash].js",
chunkFilename: "[name].[chunkhash].js"
},
module: {
loaders: [
{
test: /\.html$/,
loader: "ngtemplate?module=Dashboard&relativeTo="+path.resolve(__dirname, "web")+"/!html!html-minify",
exclude: path.resolve(__dirname, "web/index.html")
},
{ test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/, loader: "file?name=[name].[hash].[ext]" }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
new HtmlWebpackPlugin({
template: path.resolve(PATH.WWW, "index.html"),
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}),
new ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true } )
]
};
var TARGET = process.env.npm_lifecycle_event;
if (!TARGET || TARGET==="start") {
module.exports = merge(common, debug);
}
if (TARGET==="build:webpack") {
module.exports = merge(common, release);
}
With that setup the it embeds material-design-icons.css
in vendors.css
and then injects vendors.css
in index.html
template so I don't need to do it manually.
Here is the template:
<!doctype html>
<html lang="en" ng-app="Dashboard" ng-controller="MasterCtrl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title ng-bind-template="{{data.systemInfo.systemType}} by TTK">TTK - Connecting ...</title>
</head>
<body ng-cloak layout="row" layout-align="start stretch">
<md-sidenav class="md-ttkSidebar-theme md-sidenav-left md-whiteframe-z3 ttk-sidebar"
md-theme="ttkSidebar"
md-is-locked-open="true"
ui-view="sidebar">
</md-sidenav>
<md-content layout="column"
layout-align="start stretch"
flex>
<md-toolbar class="md-whiteframe-z3 ttk-header"
md-theme="ttkHeader"
ui-view="header">
</md-toolbar>
<md-content layout="column"
layout-margin
layout-align="start stretch"
flex
class="ttk-content"
md-theme="ttkContent"
ui-view="content">
</md-content>
</md-content>
</body>
</html>
And this is the end result:
<!doctype html>
<html lang="en" ng-app="Dashboard" ng-controller="MasterCtrl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title ng-bind-template="{{data.systemInfo.systemType}} by TTK">TTK - Connecting ...</title>
<link href="vendors.css" rel="stylesheet"><link href="app.css" rel="stylesheet"></head>
<body ng-cloak layout="row" layout-align="start stretch">
<md-sidenav class="md-ttkSidebar-theme md-sidenav-left md-whiteframe-z3 ttk-sidebar"
md-theme="ttkSidebar"
md-is-locked-open="true"
ui-view="sidebar">
</md-sidenav>
<md-content layout="column"
layout-align="start stretch"
flex>
<md-toolbar class="md-whiteframe-z3 ttk-header"
md-theme="ttkHeader"
ui-view="header">
</md-toolbar>
<md-content layout="column"
layout-margin
layout-align="start stretch"
flex
class="ttk-content"
md-theme="ttkContent"
ui-view="content">
</md-content>
</md-content>
<script src="manifest.js"></script><script src="vendors.js"></script><script src="app.js"></script></body>
</html>
The problem is that these days I totally lack any free time to prepare a proper example in this repo.
https://design.google.com/icons/?
i received the error: ERROR in (webpack)-material-design-icons/material-design-icons.css Module parse failed: /home/ee7klt/Code/elite-job-posting/node_modules/webpack-material-design-icons/material-design-icons.css Unexpected character '@' (4:0) You may need an appropriate loader to handle this file type.
i have included the loader and vendor as per the README in my webpack.config