Description
I'm trying to get SCSS SourceMaps working in our project but nothing seems to be working to get them enabled, I'm not sure what i'm missing here. To be honest i'm very new to webpack and have only used Gulp before, So I really have no Idea where i'm meant to enable them. Would anyone be able to take a look at my gatsby-node.js and tell me where i'm going wrong?
Environment
- Gatsby version (
npm list gatsby): 1.9.183 - Node.js version: 8.9.4
- Operating System: Windows 10
File contents (if changed):
gatsby-node.js:
```
const _ = require(`lodash`);
const Promise = require(`bluebird`);
const path = require(`path`);
const slash = require(`slash`);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const { cssModulesConfig } = require(`gatsby-1-config-css-modules`)
exports.createLayouts = ({graphql, boundActionCreators}) => {
const {createLayout} = boundActionCreators;
return new Promise((resolve, reject) => {
graphql(`
{
directusGlobal {
directusId
description
keywords
og_title
og_description
og_url
og_type
robots
geo_placename
geo_position
geo_region
icbm
og_image
og_site_name
fb_app_id
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
if (result.data !== undefined) {
createLayout({
component: path.resolve(`./src/templates/layouts/main-layout.js`),
context: result.data.directusGlobal,
})
}
resolve();
})
})
}
// Implement the Gatsby API "onCreatePage". This is
// called AFTER every page is created.
exports.onCreatePage = async ({ page, boundActionCreators }) => {
const { createPage } = boundActionCreators;
return new Promise((resolve, reject) => {
page.layout = "main-layout";
// Update the page.
createPage(page);
resolve();
});
};
exports.createPages = ({graphql, boundActionCreators}) => {
const {createPage} = boundActionCreators;
return new Promise((resolve, reject) => {
graphql(`
{
allDirectusPost {
edges {
node {
id
slug
status
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const pageTemplate = path.resolve('./src/templates/blog/Post.js');
if (result.data !== undefined) {
_.each(result.data.allDirectusPost.edges, edge => {
if (edge.node.slug !== '') {
createPage({
path: `/blog/${edge.node.slug}`,
component: slash(pageTemplate),
layout: 'main-layout',
context: {
id: edge.node.id,
}
})
}
})
}
}).then(() => {
graphql(`
{
allDirectusPackage(filter: {type: {eq: "Limited Company"}}) {
edges {
node {
directusId
name
price
description
slug,
products {
data {
id
name
description
}
}
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const pageTemplate = path.resolve('./src/templates/package/Package.js');
if (result.data !== undefined) {
_.each(result.data.allDirectusPackage.edges, edge => {
if (edge.node.slug !== '') {
createPage({
path: `/${edge.node.slug}`,
component: slash(pageTemplate),
layout: 'main-layout',
context: {
name: edge.node.name,
}
})
}
})
}
})
}).then(() => {
graphql(`
{
allDirectusService(filter: {type:{regex: "/^(additional-service|address-service)$/"}}) {
edges {
node {
directusId
name
subheading
renewal_text
price
slug
faqs {
data {
question
answer
}
}
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const pageTemplate = path.resolve('./src/templates/services/Service.js');
if (result.data !== undefined) {
_.each(result.data.allDirectusService.edges, edge => {
if (edge.node.slug !== '') {
createPage({
path: `/services/${edge.node.slug}`,
layout: 'main-layout',
component: slash(pageTemplate),
context: {
name: edge.node.name,
id: edge.node.id
}
})
}
})
}
resolve();
})
})
})
}
exports.modifyWebpackConfig = function (_ref, options) {
var config = _ref.config,
stage = _ref.stage;
var cssFiles = /\.css$/;
var sassFiles = /\.s[ac]ss$/;
var sassModulesFiles = /_\.s[ac]ss$/;
var sassLoader = `sass?${JSON.stringify(options)}!import-glob`;
config.merge({
resolve: {
root: path.resolve('./src'),
extensions: ['', '.js', '.jsx', '.json'],
},
module: {
noParse: /node_modules\/reactstrap-tether\/dist\/js\/tether.js/,
},
// { test: /\.scss$/, loader: ExtractTextPlugin.extract(scssLoader) }, // SASS & CSS FILES
// {test: /\.css/, loader: ExtractTextPlugin.extract(cssLoader)},
});
config.loader(`sass`, {
test: sassFiles,
exclude: sassModulesFiles,
loader: ExtractTextPlugin.extract([`css?minimize`, sassLoader],{ options: {
sourceMap: true
}}),
});
config.loader(`sassModules`, {
test: sassModulesFiles,
loader: ExtractTextPlugin.extract(`style`, [
cssModulesConfig(stage),
sassLoader,
],
{ options: { sourceMap: true }}),
});
config.removeLoader('css');
config.loader('css', function(cfg) {
cfg.test = /\.css$/;
cfg.loader = ExtractTextPlugin.extract('css?minimize',{
options: {
sourceMap: true
}});
return cfg
})
config.plugin('extract-css',
ExtractTextPlugin,
["styles.css", { allChunks: true }]);
return config
};
exports.modifyBabelrc = ({ babelrc }) => ({
...babelrc,
plugins: babelrc.plugins.concat(['transform-decorators-legacy', 'transform-regenerator']),
})
```
