I'm trying to load some css using the entry point in webpack.config.js. I'm using the ExtractTextPlugin but it seems that I get junk in the extracted css file
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var paths = {
// Source Directory Paths
nodeModules: './node_modules/',
scripts: 'Scripts/',
styles: 'Styles/',
tests: 'Tests/',
// Destination Directory Paths
wwwroot: './wwwroot/',
css: './css/',
fonts: './fonts/',
img: './img/',
js: './js/'
};
// webpack.config.js
module.exports = {
entry: {
'js/site.min.js': './assets/scripts/site.js',
'css/site.min.css': ['./assets/styles/site.css']
//'css/bootstrap.min.css': './node_modules/bootstrap/dist/css/bootstrap.min.css'//,
//'css/bootstrap.min.css.map': './node_modules/bootstrap/dist/css/bootstrap.min.css.map'
},
output: {
filename: '[name]',
path: './wwwroot/'
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: {
presets: [
['es2015', { modules: false }]
]
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: 'css-loader?importLoaders=1&sourceMap',
})
},
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
},
externals: { jquery: "jQuery" },
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/bootstrap/dist/css/bootstrap.css', to: paths.css },
{ from: 'node_modules/bootstrap/dist/css/bootstrap.css.map', to: paths.css },
{ from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: paths.css },
{ from: 'node_modules/bootstrap/dist/css/bootstrap.min.css.map', to: paths.css },
{ from: 'node_modules/jquery/dist/jquery.js', to: paths.js },
{ from: 'node_modules/jquery/dist/jquery.min.js', to: paths.js },
{ from: 'node_modules/jquery/dist/jquery.min.map', to: paths.js },
{ from: 'node_modules/bootstrap/dist/js/bootstrap.js', to: paths.js },
{ from: 'node_modules/bootstrap/dist/js/bootstrap.min.js', to: paths.js },
{ from: 'node_modules/bootstrap/dist/fonts', to: paths.fonts }
]),
new ExtractTextPlugin({filename: paths.css + 'site.min.css', allChunks: true})
]
}
but following produces this:
body{padding-top:50px;padding-bottom:20px}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}.carousel-caption p{font-size:20px;line-height:1.4}.btn-bracketed:before{display:inline-block;content:"[";padding-right:.5em}.btn-bracketed:after{display:inline-block;content:"]";padding-left:.5em}.carousel-inner .item img[src$=".svg"]{width:100%}@media screen and (max-width:767px){.carousel-caption{display:none}}.validation-summary-errors h5{margin-top:0}
/*# sourceMappingURL=site.min.css.map*/e,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }),
/* 1 */,
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(0);
/***/ })
/******/ ]);
/*# sourceMappingURL=site.min.css.map*/
I'm not sure why I'm getting the extra information in my .css file
If I use the following then everything functions correctly
import styles from '../styles/site.css';
Does anyone have any thoughts on this?
UPDATE (POSSIBLY FIXED)
Looks like it doesn't like my entry point name, I changed it to to the following and it seems to work:
'site': ['./assets/styles/site.css']
