I use webpack for my project. I have 2 entry points: the first one's for CSS files with CSS modules, the second - for global css files. Main.css isn't imported from any file in project so I made a special entry point for it.
const extractStylesCss = new ExtractTextPlugin('styles.css');
entry: {
'main': ["./src/index.tsx"],
'styles': "./src/main.css"
},
module: {
loaders: [
{
test: /^.*\.css$/,
exclude: [
path.join(__dirname, 'src/main.css')
],
loader: extractStylesCss.extract(
"style",
`css?modules&importLoaders=2&localIdentName=[local]___[hash:base64:5]___${pjson.version}!typed-css-modules!postcss?pack=pure&sourceMap=inline`
)
},
{
test: /main\.css$/,
loader: extractStylesCss.extract('style', 'css!postcss?pack=pure&sourceMap=inline')
},
]
},
plugins: [
extractStylesCss
],
output: {
path: path.join(__dirname, "/docs"),
filename: "[name].js"
}
I need only one output file - styles.css. I know that ExtractTextPlugin generates one bundle per entry point, but is there any possibility to get one file?
You had the right idea by adding it to the entry, unfortunately you created another bundle. Each property of the entry object creates a separate bundle, this is why you also get a style.js even though it only has the webpack bootstrap code in it and extract-text-webpack-plugin just overwrites the CSS file if you use the same output file for both.
What you really want is adding the main.css to the main bundle (it should conceptually be part of it, not in a separate bundle). The entries also accept an array with multiple entry points. With the following entry the CSS will automatically be combined:
entry: {
main: ['./src/index.tsx', './src/main.css']
},
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments