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";`,
},
},
],
},
],
},
};
Instead of /**/*.{css,scss}
try /**/.{commonStyles},{css,scss}
Alternatively:
entry: glob.sync(
`${path.resolve(fs.realpathSync(process.cwd()), 'src')}/**/*.{css,scss}`,
ignore: [
'**/src/styles/commonStyles.scss',
],
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.