CSS not applying

[attiqeurrehman]

Hi,

I have changed the App.scss and it's appending in to the style.css. Please see the screenshot below:

But for some reason it's not been applied to the site. Any ideas?

[pauldotknopf]

What does your styles.css look like?

Also, your generated html markup?

[attiqeurrehman]

Please find the attached generated style.css and generated html markup. https://drive.google.com/open?id=0BxaNpya8aCYvOXRJeFZqUkFxWWc

[meninjanho4788]

@attiqeurrehman your file App.scss should :
:global {
.classA{
background-color:red;
}
}

if you upgrade to webpack 2.0, no need :global in scss file.
import './App.scss';

[attiqeurrehman]

I have fixed this by changing the dev.config.js using this:

From

{ test: /\.css$/, loader: 'css/locals?module' },
{ test: /\.scss$/, loader: 'css/locals?module!sass' },

To

 { test: /\.css$/, loader: 'css' },
 { test: /\.scss$/, loader: 'css!sass' },

and from

{ test: /\.css$/, loader: extractCSS.extract('style', 'css?modules') },
{ test: /\.scss$/, loader: extractCSS.extract('style', 'css?modules!sass') },

to

{ test: /\.css$/, loader: extractCSS.extract('style', 'css') },
{ test: /\.scss$/, loader: extractCSS.extract('style', 'css!sass') },

No idea why it worked.

[meninjanho4788]

My webpack 2.0
var fs = require('fs');
var babelrc = JSON.parse(fs.readFileSync('./.babelrc'));
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('styles.css');
var webpack = require('webpack');
var path = require('path');

module.exports = {
server: {
entry: {
server: [
path.resolve(__dirname, '..', '..', 'Scripts', 'server.js')
]
},
resolve: {
modules: [
"Scripts",
"node_modules"
],
alias: {
'superagent': path.resolve(__dirname, '..', 'utils', 'superagent-server.js'),
'promise-window': path.resolve(__dirname, '..', 'utils', 'promise-window-server.js')
}
},
module: {
loaders: [
{ test: /.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader?" + JSON.stringify(babelrc), "eslint-loader", ], },
{ test: /.css/, loaders: ['css-loader'] },
{ test: /.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
{ test: /.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' },
{ test: /.(jpg|png|gif)$/, loader: 'file-loader' }
]
},
output: {
filename: '[name].generated.js',
libraryTarget: 'this',
path: path.resolve(__dirname, '..', '..', 'wwwroot', 'pack'),
publicPath: '/pack/'
},
plugins: [
new webpack.DefinePlugin({
CLIENT: false,
SERVER: true
})
],
},
client: {
entry: {
client: [
path.resolve(__dirname, '..', '..', 'Scripts', 'client.js')
]
},
resolve: {
modules: [
"Scripts",
"node_modules"
]
},
module: {
loaders: [
{ test: /.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader?" + JSON.stringify(babelrc), "eslint-loader", ], },
{
test: /.css$/,
use: extractCSS.extract(['css-loader'])
},
{
test: /.scss$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{ test: /.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' },
{ test: /.(jpg|png|gif)$/, loader: 'file-loader' }
]
},
output: {
filename: '[name].generated.js',
libraryTarget: 'this',
path: path.resolve(__dirname, '..', '..', 'wwwroot', 'pack'),
publicPath: '/pack/'
},
plugins: [
extractCSS,
new webpack.DefinePlugin({
CLIENT: true,
SERVER: false
})
],
devtool: 'source-map'
}
};