i'd have structure this
-styles --main.scss --somecomponent.scss -compiledstyles --main.css --somecomponent.css actually can this
-styles --main.scss --somecomponent.scss --all.scss (import scss file) -compiledstyles --main.css ( css) this webpack config
var path = require('path'); var extracttextplugin = require('extract-text-webpack-plugin'); var extractcss2 = new extracttextplugin('[name].css'); module.exports = { devtool: 'eval', entry: './client/styles/all.scss', output: { path: path.join(__dirname, 'compiledstyles'), filename: 'page.js', publicpath: '/compiledstyles/' }, module: { loaders: [ { test: /\.scss$/, loader: extractcss2.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader") }, { //image loader test: /\.(jpe?g|png|gif|svg)$/i, loader: 'file-loader' }, { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, plugins: [ extractcss2 ] }; is possible compile scss files single css files ? don't know how manage case. i've tried assign entry: './client/styles' occures error.
edit:
i solved gulp.
the idea of webpack put needed in javascript-files. it's intention not build css-file every css-file.
if want still use webpack, try in webpack config:
module.exports = { // ... entry: { 'main': './client/styles/main.scss', 'somecomponents': './client/styles/somecomponents.scss', }, // ... } i have updated answer after adamo94 noted used gulp, else more information. convert scss files need sass/scss-processor. can call processor single call more sources it's use further processing.
use gulp or grunt. can configured build need. have different pros , cons, there further tools, ones you'd take look.
