I am using the following webpack config to handle / load all of my sass files. One important item is that I am using additionalData
to preappend my common styles. This is causing a conflict, however, because my entry for webpack is any and all sass files, which means that my commonStyles.scss
is already getting loaded. When I run my app, I get the following error:
errorMessage:
SassError: This file is already being loaded.
╷
1 │ @import "src/styles/commonStyles.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
src/styles/sizes.scss 1:9 root stylesheet
How can I create an entry point that includes all sass files in my app except for / excluding commonStyles.scss
(or better yet, any files in the /src/styles/
folder)? Thanks for the help!
webpack config:
'use strict';
const fs = require('fs');
const glob = require('glob');
const path = require('path');
const sassRegex = /\.(scss|sass)$/;
module.exports = {
mode: 'production',
bail: true,
devtool: false,
entry: glob.sync(`${path.resolve(fs.realpathSync(process.cwd()), 'src')}/**/*.{css,scss}`),
output: {
path: 'build',
},
module: {
rules: [
{
test: sassRegex,
exclude: /node_modules/,
use: [
{
loader: 'sass-loader',
options: {
sourceMap: true,
additionalData: `@import "src/styles/commonStyles.scss";`,
},
},
],
},
],
},
};
from How to exclude files from a webpack entry point
No comments:
Post a Comment