Unable to import sass files in react
0
I'm using the following boilerplate : https://github.com/spravo/typescript-react-express
I designed a first component : Button
import * as React from 'react';
import './button.scss';
export interface IButton {
value: string;
onClick: () => void;
}
class Button extends React.Component<IButton, {}> {
public render () {
return (
<div className='Button'>
<button onClick={this.props.onClick} className='Button__btn'>
{this.props.value}
</button>
</div>
);
}
}
export default Button;
And in the button.scss I have this simple line :
.Button {
background-color: red;
}
But I get the following error :
(function (exports, require, module, __filename, __dirname) { .Button {
SyntaxError: Unexpected token .
This is my webpack config (quite the same as the one from the repo) except the config.common.js for the webpack migration :
'use strict';
const path = require('path');
const webpack = require("webpack");
const config = require('../config')(process.env.NODE_ENV);
const vendors = require('./vendor');
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = function getConfig(dirname) {
return {
target: 'web',
context: path.resolve(dirname),
stats: {
chunks: false,
colors: true,
},
entry: {
vendor: vendors
},
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.scss', '.css' ],
modules: [
path.resolve(__dirname, '..', 'src'),
path.resolve(__dirname, '..', 'node_modules'),
]
},
output: {
path: config.PUBLIC_FOLDER,
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: config.PUBLIC_PATH
},
module: {
rules:
},
optimization:{
splitChunks:{
name: 'vendor'
}
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor'
// }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV)
},
__CLIENT__: true,
__SERVER__: false,
__DEV__: NODE_ENV === 'development',
__TEST__: false
})
]
};
};
The Css loaders :
'use strict';
const isDevelopment = (process.env.NODE_ENV || 'development') === 'development';
const autoprefixer = require('autoprefixer');
module.exports = {
scssLoader: [
{
loader: 'css-loader',
options: {
minimize: !isDevelopment,
sourceMap: isDevelopment
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: isDevelopment,
plugins: [
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
};
It seems that the only scss that works is in the styles/index.scss but I don't get why it doesn't take other scss files.
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"baseUrl" : "./src",
"target": "es5",
"jsx": "react",
"alwaysStrict": true,
"sourceMap": true,
"outDir": "dist",
"lib": [
"dom",
"es2015",
"es5",
"es6"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"typings"
],
"exclude": [
"node_modules"
]
}
reactjs typescript webpack sass
asked Nov 13 '18 at 15:19
TLRTLR
1752416
add a comment |
0
I'm using the following boilerplate : https://github.com/spravo/typescript-react-express
I designed a first component : Button
import * as React from 'react';
import './button.scss';
export interface IButton {
value: string;
onClick: () => void;
}
class Button extends React.Component<IButton, {}> {
public render () {
return (
<div className='Button'>
<button onClick={this.props.onClick} className='Button__btn'>
{this.props.value}
</button>
</div>
);
}
}
export default Button;
And in the button.scss I have this simple line :
.Button {
background-color: red;
}
But I get the following error :
(function (exports, require, module, __filename, __dirname) { .Button {
SyntaxError: Unexpected token .
This is my webpack config (quite the same as the one from the repo) except the config.common.js for the webpack migration :
'use strict';
const path = require('path');
const webpack = require("webpack");
const config = require('../config')(process.env.NODE_ENV);
const vendors = require('./vendor');
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = function getConfig(dirname) {
return {
target: 'web',
context: path.resolve(dirname),
stats: {
chunks: false,
colors: true,
},
entry: {
vendor: vendors
},
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.scss', '.css' ],
modules: [
path.resolve(__dirname, '..', 'src'),
path.resolve(__dirname, '..', 'node_modules'),
]
},
output: {
path: config.PUBLIC_FOLDER,
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: config.PUBLIC_PATH
},
module: {
rules:
},
optimization:{
splitChunks:{
name: 'vendor'
}
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor'
// }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV)
},
__CLIENT__: true,
__SERVER__: false,
__DEV__: NODE_ENV === 'development',
__TEST__: false
})
]
};
};
The Css loaders :
'use strict';
const isDevelopment = (process.env.NODE_ENV || 'development') === 'development';
const autoprefixer = require('autoprefixer');
module.exports = {
scssLoader: [
{
loader: 'css-loader',
options: {
minimize: !isDevelopment,
sourceMap: isDevelopment
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: isDevelopment,
plugins: [
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
};
It seems that the only scss that works is in the styles/index.scss but I don't get why it doesn't take other scss files.
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"baseUrl" : "./src",
"target": "es5",
"jsx": "react",
"alwaysStrict": true,
"sourceMap": true,
"outDir": "dist",
"lib": [
"dom",
"es2015",
"es5",
"es6"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"typings"
],
"exclude": [
"node_modules"
]
}
reactjs typescript webpack sass
asked Nov 13 '18 at 15:19
TLRTLR
1752416
What scss loaders are you using? I can't see that in your webpack configuration
– Ajay Gaur
Nov 13 '18 at 15:25
Edited, I added it to the post. Most of the project comes from the boiler plates, I just added a component to It
– TLR
Nov 13 '18 at 15:29
add a comment |
0
0
0
0
I'm using the following boilerplate : https://github.com/spravo/typescript-react-express
I designed a first component : Button
import * as React from 'react';
import './button.scss';
export interface IButton {
value: string;
onClick: () => void;
}
class Button extends React.Component<IButton, {}> {
public render () {
return (
<div className='Button'>
<button onClick={this.props.onClick} className='Button__btn'>
{this.props.value}
</button>
</div>
);
}
}
export default Button;
And in the button.scss I have this simple line :
.Button {
background-color: red;
}
But I get the following error :
(function (exports, require, module, __filename, __dirname) { .Button {
SyntaxError: Unexpected token .
This is my webpack config (quite the same as the one from the repo) except the config.common.js for the webpack migration :
'use strict';
const path = require('path');
const webpack = require("webpack");
const config = require('../config')(process.env.NODE_ENV);
const vendors = require('./vendor');
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = function getConfig(dirname) {
return {
target: 'web',
context: path.resolve(dirname),
stats: {
chunks: false,
colors: true,
},
entry: {
vendor: vendors
},
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.scss', '.css' ],
modules: [
path.resolve(__dirname, '..', 'src'),
path.resolve(__dirname, '..', 'node_modules'),
]
},
output: {
path: config.PUBLIC_FOLDER,
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: config.PUBLIC_PATH
},
module: {
rules:
},
optimization:{
splitChunks:{
name: 'vendor'
}
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor'
// }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV)
},
__CLIENT__: true,
__SERVER__: false,
__DEV__: NODE_ENV === 'development',
__TEST__: false
})
]
};
};
The Css loaders :
'use strict';
const isDevelopment = (process.env.NODE_ENV || 'development') === 'development';
const autoprefixer = require('autoprefixer');
module.exports = {
scssLoader: [
{
loader: 'css-loader',
options: {
minimize: !isDevelopment,
sourceMap: isDevelopment
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: isDevelopment,
plugins: [
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
};
It seems that the only scss that works is in the styles/index.scss but I don't get why it doesn't take other scss files.
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"baseUrl" : "./src",
"target": "es5",
"jsx": "react",
"alwaysStrict": true,
"sourceMap": true,
"outDir": "dist",
"lib": [
"dom",
"es2015",
"es5",
"es6"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"typings"
],
"exclude": [
"node_modules"
]
}
reactjs typescript webpack sass
asked Nov 13 '18 at 15:19
TLRTLR
1752416
I'm using the following boilerplate : https://github.com/spravo/typescript-react-express
I designed a first component : Button
import * as React from 'react';
import './button.scss';
export interface IButton {
value: string;
onClick: () => void;
}
class Button extends React.Component<IButton, {}> {
public render () {
return (
<div className='Button'>
<button onClick={this.props.onClick} className='Button__btn'>
{this.props.value}
</button>
</div>
);
}
}
export default Button;
And in the button.scss I have this simple line :
.Button {
background-color: red;
}
But I get the following error :
(function (exports, require, module, __filename, __dirname) { .Button {
SyntaxError: Unexpected token .
This is my webpack config (quite the same as the one from the repo) except the config.common.js for the webpack migration :
'use strict';
const path = require('path');
const webpack = require("webpack");
const config = require('../config')(process.env.NODE_ENV);
const vendors = require('./vendor');
const NODE_ENV = process.env.NODE_ENV || 'development';
module.exports = function getConfig(dirname) {
return {
target: 'web',
context: path.resolve(dirname),
stats: {
chunks: false,
colors: true,
},
entry: {
vendor: vendors
},
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.scss', '.css' ],
modules: [
path.resolve(__dirname, '..', 'src'),
path.resolve(__dirname, '..', 'node_modules'),
]
},
output: {
path: config.PUBLIC_FOLDER,
filename: '[name].[hash].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: config.PUBLIC_PATH
},
module: {
rules:
},
optimization:{
splitChunks:{
name: 'vendor'
}
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor'
// }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV)
},
__CLIENT__: true,
__SERVER__: false,
__DEV__: NODE_ENV === 'development',
__TEST__: false
})
]
};
};
The Css loaders :
'use strict';
const isDevelopment = (process.env.NODE_ENV || 'development') === 'development';
const autoprefixer = require('autoprefixer');
module.exports = {
scssLoader: [
{
loader: 'css-loader',
options: {
minimize: !isDevelopment,
sourceMap: isDevelopment
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: isDevelopment,
plugins: [
autoprefixer({
browsers:['ie >= 8', 'last 4 version']
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
};
It seems that the only scss that works is in the styles/index.scss but I don't get why it doesn't take other scss files.
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"baseUrl" : "./src",
"target": "es5",
"jsx": "react",
"alwaysStrict": true,
"sourceMap": true,
"outDir": "dist",
"lib": [
"dom",
"es2015",
"es5",
"es6"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"typings"
],
"exclude": [
"node_modules"
]
}
reactjs typescript webpack sass
reactjs typescript webpack sass
asked Nov 13 '18 at 15:19
TLRTLR
1752416
asked Nov 13 '18 at 15:19
TLRTLR
1752416
edited Nov 13 '18 at 15:28
TLR
asked Nov 13 '18 at 15:19
TLRTLR
1752416
asked Nov 13 '18 at 15:19
TLRTLR
1752416
asked Nov 13 '18 at 15:19
TLRTLR
1752416
1752416
What scss loaders are you using? I can't see that in your webpack configuration
– Ajay Gaur
Nov 13 '18 at 15:25
Edited, I added it to the post. Most of the project comes from the boiler plates, I just added a component to It
– TLR
Nov 13 '18 at 15:29
add a comment |
What scss loaders are you using? I can't see that in your webpack configuration
– Ajay Gaur
Nov 13 '18 at 15:25
Edited, I added it to the post. Most of the project comes from the boiler plates, I just added a component to It
– TLR
Nov 13 '18 at 15:29
What scss loaders are you using? I can't see that in your webpack configuration
– Ajay Gaur
Nov 13 '18 at 15:25
What scss loaders are you using? I can't see that in your webpack configuration
– Ajay Gaur
Nov 13 '18 at 15:25
Edited, I added it to the post. Most of the project comes from the boiler plates, I just added a component to It
– TLR
Nov 13 '18 at 15:29
Edited, I added it to the post. Most of the project comes from the boiler plates, I just added a component to It
– TLR
Nov 13 '18 at 15:29
add a comment |
1 Answer
1
active
oldest
votes
0
It is really weird that your webpack config "module.rules" is an empty array!
That is where your loader settings should be added.
If I were you, I would have copied the content of css-loaders config file and pasted in your webpack.config.js file. Make sure you store it in a normal variable/object instead of module.exports.
This is how my webpack config looks like:
const styleLoader = {
test: /.(scss)$/,
include: path.resolve(__dirname, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
})
};
And then my webpack config looks like below. Pay attention to the modules.rules section:
module.exports = {
entry: {
app: ['babel-polyfill', 'whatwg-fetch', srcPath('index.js')],
silentrenew: [srcPath('silentrenew.js')]
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: '[name].js'
},
devtool: 'source-map',
plugins: [
htmlPlugin('index.html', 'app'),
new ExtractTextPlugin('bundle.css'),
],
module: {
rules: [
babelLoader,
fontLoader,
svgLoader,
styleLoader
]
}
};
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284127%2funable-to-import-sass-files-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It is really weird that your webpack config "module.rules" is an empty array!
That is where your loader settings should be added.
If I were you, I would have copied the content of css-loaders config file and pasted in your webpack.config.js file. Make sure you store it in a normal variable/object instead of module.exports.
This is how my webpack config looks like:
const styleLoader = {
test: /.(scss)$/,
include: path.resolve(__dirname, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
})
};
And then my webpack config looks like below. Pay attention to the modules.rules section:
module.exports = {
entry: {
app: ['babel-polyfill', 'whatwg-fetch', srcPath('index.js')],
silentrenew: [srcPath('silentrenew.js')]
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: '[name].js'
},
devtool: 'source-map',
plugins: [
htmlPlugin('index.html', 'app'),
new ExtractTextPlugin('bundle.css'),
],
module: {
rules: [
babelLoader,
fontLoader,
svgLoader,
styleLoader
]
}
};
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
add a comment |
0
It is really weird that your webpack config "module.rules" is an empty array!
That is where your loader settings should be added.
If I were you, I would have copied the content of css-loaders config file and pasted in your webpack.config.js file. Make sure you store it in a normal variable/object instead of module.exports.
This is how my webpack config looks like:
const styleLoader = {
test: /.(scss)$/,
include: path.resolve(__dirname, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
})
};
And then my webpack config looks like below. Pay attention to the modules.rules section:
module.exports = {
entry: {
app: ['babel-polyfill', 'whatwg-fetch', srcPath('index.js')],
silentrenew: [srcPath('silentrenew.js')]
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: '[name].js'
},
devtool: 'source-map',
plugins: [
htmlPlugin('index.html', 'app'),
new ExtractTextPlugin('bundle.css'),
],
module: {
rules: [
babelLoader,
fontLoader,
svgLoader,
styleLoader
]
}
};
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
add a comment |
0
0
0
It is really weird that your webpack config "module.rules" is an empty array!
That is where your loader settings should be added.
If I were you, I would have copied the content of css-loaders config file and pasted in your webpack.config.js file. Make sure you store it in a normal variable/object instead of module.exports.
This is how my webpack config looks like:
const styleLoader = {
test: /.(scss)$/,
include: path.resolve(__dirname, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
})
};
And then my webpack config looks like below. Pay attention to the modules.rules section:
module.exports = {
entry: {
app: ['babel-polyfill', 'whatwg-fetch', srcPath('index.js')],
silentrenew: [srcPath('silentrenew.js')]
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: '[name].js'
},
devtool: 'source-map',
plugins: [
htmlPlugin('index.html', 'app'),
new ExtractTextPlugin('bundle.css'),
],
module: {
rules: [
babelLoader,
fontLoader,
svgLoader,
styleLoader
]
}
};
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
It is really weird that your webpack config "module.rules" is an empty array!
That is where your loader settings should be added.
If I were you, I would have copied the content of css-loaders config file and pasted in your webpack.config.js file. Make sure you store it in a normal variable/object instead of module.exports.
This is how my webpack config looks like:
const styleLoader = {
test: /.(scss)$/,
include: path.resolve(__dirname, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
})
};
And then my webpack config looks like below. Pay attention to the modules.rules section:
module.exports = {
entry: {
app: ['babel-polyfill', 'whatwg-fetch', srcPath('index.js')],
silentrenew: [srcPath('silentrenew.js')]
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: '[name].js'
},
devtool: 'source-map',
plugins: [
htmlPlugin('index.html', 'app'),
new ExtractTextPlugin('bundle.css'),
],
module: {
rules: [
babelLoader,
fontLoader,
svgLoader,
styleLoader
]
}
};
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
answered Nov 13 '18 at 16:57
xeitonxeiton
2216
2216
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53284127%2funable-to-import-sass-files-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What scss loaders are you using? I can't see that in your webpack configuration
– Ajay Gaur
Nov 13 '18 at 15:25
Edited, I added it to the post. Most of the project comes from the boiler plates, I just added a component to It
– TLR
Nov 13 '18 at 15:29