Ufdjrw

Why is the principal energy of an electron lower for excited electrons in a higher energy state?

Why does the Persian emissary display a string of crowned skulls?

Why didn't Voldemort know what Grindelwald looked like?

Pre-Employment Background Check With Consent For Future Checks

ContourPlot — How do I color by contour curvature?

Grepping string, but include all non-blank lines following each grep match

Why can't the Brexit deadlock in the UK parliament be solved with a plurality vote?

Can I run 125kHz RF circuit on a breadboard?

Deciphering cause of death?

Should I assume I have passed probation?

What should be the ideal length of sentences in a blog post for ease of reading?

How do I tell my boss that I'm quitting in 15 days (a colleague left this week)

Are Captain Marvel's powers affected by Thanos breaking the Tesseract and claiming the stone?

Is there a reason to prefer HFS+ over APFS for disk images in High Sierra and/or Mojave?

How do you justify more code being written by following clean code practices?

What is the meaning of the following sentence?

When and why was runway 07/25 at Kai Tak removed?

Would a primitive species be able to learn English from reading books alone?

If the only attacker is removed from combat, is a creature still counted as having attacked this turn?

Quoting Keynes in a lecture

In One Punch Man, is King actually weak?

Can I say "fingers" when referring to toes?

Mimic lecturing on blackboard, facing audience

How to preserve electronics (computers, iPads and phones) for hundreds of years

Webpack file-loader with sass-loader

Webpack 4. Compile scss to separate css fileWhat's the difference between SCSS and Sass?Sass Variable in CSS calc() functionNPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackWebpack and sass-loader files import orderSASS not rendering in React / Webpack projectRelative CSS urls in WebpackSass-loader with Webpack, React and Babel not workingVue.js webpack sass-loader issue with my .scss fileWebpack : how to work with images in scss and extract to css files…?url-loader / file-loader breaking relative paths in css output using webpack

0

I am new to nodejs and get a problem when trying to use sass with it.

The following information is just fictional, but it represents the
actual condition.

---

THE SCENARIO:

I have the following folder structure:

frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

Goal:

I want to compile the style.scss to style.css using webpack and put it inside dist/frontend/css/ directory, so it should be resulting this path: dist/frontend/css/style.css and create the following folder structure:

dist/
 - frontend/
 - scss/
 - style.scs
 - main.js
frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

---

THE CODES:

main.js

import `style from "./scss/style.scss";`

webpack.config.js

 module.exports = {
 mode: "development",
 entry: 
 main: "./frontend/main.js"
 ,
 output: 
 path: path.join(__dirname, "/dist/frontend"),
 publicPath: "/",
 filename: "[name].js"
 ,
 module: 
 rules: [ 
 
 test: /.(s*)css$/,
 use: [
 
 loader: "file-loader",
 options: 
 name: "css/[name].[ext]"
 
 ,
 "style-loader/url",
 "css-loader?-url",
 "sass-loader"
 ] 
 
 ]
 

---

THE RESULT:

I get this message:

Module not found: Error: Can't resolve './scss/style.scss' in 'E:project_namefrontend'

---

THE QUESTIONS

1. Why is that happening?




2. What is the correct codes to achieve the Goal?

node.js webpack sass sass-loader webpack-file-loader

share|improve this question

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

add a comment | 

0

I am new to nodejs and get a problem when trying to use sass with it.

The following information is just fictional, but it represents the
actual condition.

---

THE SCENARIO:

I have the following folder structure:

frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

Goal:

I want to compile the style.scss to style.css using webpack and put it inside dist/frontend/css/ directory, so it should be resulting this path: dist/frontend/css/style.css and create the following folder structure:

dist/
 - frontend/
 - scss/
 - style.scs
 - main.js
frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

---

THE CODES:

main.js

import `style from "./scss/style.scss";`

webpack.config.js

 module.exports = {
 mode: "development",
 entry: 
 main: "./frontend/main.js"
 ,
 output: 
 path: path.join(__dirname, "/dist/frontend"),
 publicPath: "/",
 filename: "[name].js"
 ,
 module: 
 rules: [ 
 
 test: /.(s*)css$/,
 use: [
 
 loader: "file-loader",
 options: 
 name: "css/[name].[ext]"
 
 ,
 "style-loader/url",
 "css-loader?-url",
 "sass-loader"
 ] 
 
 ]
 

---

THE RESULT:

I get this message:

Module not found: Error: Can't resolve './scss/style.scss' in 'E:project_namefrontend'

---

THE QUESTIONS

1. Why is that happening?




2. What is the correct codes to achieve the Goal?

node.js webpack sass sass-loader webpack-file-loader

share|improve this question

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

add a comment | 

I am new to nodejs and get a problem when trying to use sass with it.

The following information is just fictional, but it represents the
actual condition.

---

THE SCENARIO:

I have the following folder structure:

frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

Goal:

I want to compile the style.scss to style.css using webpack and put it inside dist/frontend/css/ directory, so it should be resulting this path: dist/frontend/css/style.css and create the following folder structure:

dist/
 - frontend/
 - scss/
 - style.scs
 - main.js
frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

---

THE CODES:

main.js

import `style from "./scss/style.scss";`

webpack.config.js

 module.exports = {
 mode: "development",
 entry: 
 main: "./frontend/main.js"
 ,
 output: 
 path: path.join(__dirname, "/dist/frontend"),
 publicPath: "/",
 filename: "[name].js"
 ,
 module: 
 rules: [ 
 
 test: /.(s*)css$/,
 use: [
 
 loader: "file-loader",
 options: 
 name: "css/[name].[ext]"
 
 ,
 "style-loader/url",
 "css-loader?-url",
 "sass-loader"
 ] 
 
 ]
 

---

THE RESULT:

I get this message:

Module not found: Error: Can't resolve './scss/style.scss' in 'E:project_namefrontend'

---

THE QUESTIONS

1. Why is that happening?




2. What is the correct codes to achieve the Goal?

node.js webpack sass sass-loader webpack-file-loader

share|improve this question

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

dist/
 - frontend/
 - scss/
 - style.scs
 - main.js
frontend/
 - scss/
 - style.scss
 - main.js
webpack.config.js

import `style from "./scss/style.scss";`

 module.exports = {
 mode: "development",
 entry: 
 main: "./frontend/main.js"
 ,
 output: 
 path: path.join(__dirname, "/dist/frontend"),
 publicPath: "/",
 filename: "[name].js"
 ,
 module: 
 rules: [ 
 
 test: /.(s*)css$/,
 use: [
 
 loader: "file-loader",
 options: 
 name: "css/[name].[ext]"
 
 ,
 "style-loader/url",
 "css-loader?-url",
 "sass-loader"
 ] 
 
 ]
 

share|improve this question

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

share|improve this question

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

asked Mar 7 at 3:00

KeepMoveKeepMove

2,22512538

1 Answer
1

active

oldest

votes

0

As the message said, this path is not valid: './scss/style.scss'. There are typo when defining the path. The folder is supposed to be sass instead of scss.

The following configuration will work to achieve the Goal mentioned in the question:

 module: 
 rules: [
 
 test: /.(s*)css$/, 
 use: [
 "style-loader/url",
 
 loader: "file-loader",
 options: 
 name: "css/[name].css"
 
 ,
 "sass-loader"
 ]
 
 ]

It works like Mini CSS Extract Plugin, but does not generating additional .js files for each .css file when used to convert multiple .scss files into different .css files.

share|improve this answer

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55035376%2fwebpack-file-loader-with-sass-loader%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

As the message said, this path is not valid: './scss/style.scss'. There are typo when defining the path. The folder is supposed to be sass instead of scss.

The following configuration will work to achieve the Goal mentioned in the question:

 module: 
 rules: [
 
 test: /.(s*)css$/, 
 use: [
 "style-loader/url",
 
 loader: "file-loader",
 options: 
 name: "css/[name].css"
 
 ,
 "sass-loader"
 ]
 
 ]

It works like Mini CSS Extract Plugin, but does not generating additional .js files for each .css file when used to convert multiple .scss files into different .css files.

share|improve this answer

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538

add a comment | 

0

As the message said, this path is not valid: './scss/style.scss'. There are typo when defining the path. The folder is supposed to be sass instead of scss.

The following configuration will work to achieve the Goal mentioned in the question:

 module: 
 rules: [
 
 test: /.(s*)css$/, 
 use: [
 "style-loader/url",
 
 loader: "file-loader",
 options: 
 name: "css/[name].css"
 
 ,
 "sass-loader"
 ]
 
 ]

It works like Mini CSS Extract Plugin, but does not generating additional .js files for each .css file when used to convert multiple .scss files into different .css files.

share|improve this answer

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538

add a comment | 

As the message said, this path is not valid: './scss/style.scss'. There are typo when defining the path. The folder is supposed to be sass instead of scss.

The following configuration will work to achieve the Goal mentioned in the question:

 module: 
 rules: [
 
 test: /.(s*)css$/, 
 use: [
 "style-loader/url",
 
 loader: "file-loader",
 options: 
 name: "css/[name].css"
 
 ,
 "sass-loader"
 ]
 
 ]

It works like Mini CSS Extract Plugin, but does not generating additional .js files for each .css file when used to convert multiple .scss files into different .css files.

share|improve this answer

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538

 module: 
 rules: [
 
 test: /.(s*)css$/, 
 use: [
 "style-loader/url",
 
 loader: "file-loader",
 options: 
 name: "css/[name].css"
 
 ,
 "sass-loader"
 ]
 
 ]

share|improve this answer

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538

answered Mar 7 at 13:38

KeepMoveKeepMove

2,22512538