Styjun

I want to copy my HOME folder to a USB flash drive but I can't. I accidentally removed Python 3 and lost many important stuff

Circle around all points of a layer

What is the best way to cause swarm intelligence to be destroyed?

SQL Minimum Row count

Why is there a need to prevent a racist, sexist, or otherwise bigoted vendor from discriminating who they sell to?

How many numbers in the matrix?

How do we avoid CI-driven development...?

Why does this Pokémon I just hatched need to be healed?

How quickly could a country build a tall concrete wall around a city?

How does The Fools Guild make its money?

Generator for parity?

Reusing story title as chapter title

Why should we care about syntactic proofs if we can show semantically that statements are true?

How to display a duet in lyrics?

Acceptable to cut steak before searing?

Improving software when the author can see no need for improvement

Plausibility of Ice Eaters in the Arctic

Is multiplication of real numbers uniquely defined as being distributive over addition?

Can an SPI slave start a transmission in full-duplex mode?

How can I tell if a flight itinerary is fake?

Best gun to modify into a monsterhunter weapon?

Why should public servants be apolitical?

Physics of Guitar frets and sound

Infeasibility in mathematical optimization models

Webpack Encore: unexpected SCSS import order

What's the difference between SCSS and Sass?Import regular CSS file in SCSS file?How can one import only variables and mixins from Sass stylesheets?Scss import only variables without stylesFoundation basics, scss, js and bower componentsNPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackWebpack include foundation framework and app scss compiling to cssCompiling bootstrap scss with webpack in .Net Core Angular TemplateUse custom SCSS with Bootstrap-Vue + Webpack + Vue.jsEncore Vue.js style compilation wrong folder

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I use Symfony + Webpack Encore and try to split styles into "layout" and "page-based", but only to make development more comfortable: I still want to compile one css file for them (in fact, there is a limited number of such css files, each one for block of pages, but for easier understanding let's assume only one is necessary). So I do like this:

_global.scss

// ... bootstrap variables redefenition here

@import "~bootstrap/scss/bootstrap";

// ... common functions, mixins, font-face definitions here

.my_style1 
 padding-left: 12px;
 padding-right: 12px;


.my_style2 
 @include make-container-max-widths();

app.css

@import "_global"

// other styles here

During the compilation (require('../css/app.scss'); only in my app.js) styles are ordered: [ global, bootstrap, app ] and I don't understand why. I mean, if you use them as:

<div class="container my-style1"></div>

container's padding will override defined in my-style1.

The most strange thing is that in dev app.css they are ordered as expected (my-style is lower than container), but in prod not (container is lower than my-style). When you work in dev (and Chrome display non-compiled styles, you also see that _grid.scss overrides _global.scss)

css webpack sass

share|improve this question

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

add a comment | 

0

I use Symfony + Webpack Encore and try to split styles into "layout" and "page-based", but only to make development more comfortable: I still want to compile one css file for them (in fact, there is a limited number of such css files, each one for block of pages, but for easier understanding let's assume only one is necessary). So I do like this:

_global.scss

// ... bootstrap variables redefenition here

@import "~bootstrap/scss/bootstrap";

// ... common functions, mixins, font-face definitions here

.my_style1 
 padding-left: 12px;
 padding-right: 12px;


.my_style2 
 @include make-container-max-widths();

app.css

@import "_global"

// other styles here

During the compilation (require('../css/app.scss'); only in my app.js) styles are ordered: [ global, bootstrap, app ] and I don't understand why. I mean, if you use them as:

<div class="container my-style1"></div>

container's padding will override defined in my-style1.

The most strange thing is that in dev app.css they are ordered as expected (my-style is lower than container), but in prod not (container is lower than my-style). When you work in dev (and Chrome display non-compiled styles, you also see that _grid.scss overrides _global.scss)

css webpack sass

share|improve this question

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

add a comment | 

I use Symfony + Webpack Encore and try to split styles into "layout" and "page-based", but only to make development more comfortable: I still want to compile one css file for them (in fact, there is a limited number of such css files, each one for block of pages, but for easier understanding let's assume only one is necessary). So I do like this:

_global.scss

// ... bootstrap variables redefenition here

@import "~bootstrap/scss/bootstrap";

// ... common functions, mixins, font-face definitions here

.my_style1 
 padding-left: 12px;
 padding-right: 12px;


.my_style2 
 @include make-container-max-widths();

app.css

@import "_global"

// other styles here

During the compilation (require('../css/app.scss'); only in my app.js) styles are ordered: [ global, bootstrap, app ] and I don't understand why. I mean, if you use them as:

<div class="container my-style1"></div>

container's padding will override defined in my-style1.

The most strange thing is that in dev app.css they are ordered as expected (my-style is lower than container), but in prod not (container is lower than my-style). When you work in dev (and Chrome display non-compiled styles, you also see that _grid.scss overrides _global.scss)

css webpack sass

share|improve this question

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

// ... bootstrap variables redefenition here

@import "~bootstrap/scss/bootstrap";

// ... common functions, mixins, font-face definitions here

.my_style1 
 padding-left: 12px;
 padding-right: 12px;


.my_style2 
 @include make-container-max-widths();

@import "_global"

// other styles here

<div class="container my-style1"></div>

share|improve this question

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

share|improve this question

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

asked Mar 27 at 6:47

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

1 Answer
1

active

oldest

votes

0

Sorry for this quick self-answer, I've really spent a lot of time before asking, but after it found the solution quickly. Hope, can save smb's time.

You should simply add other styles to app.js. This way they will recompile on any file change (in previous example they recompile only on app.scss change) and the order will become correct:

app.js

require('_global.scss');
require('app.scss');

share|improve this answer

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

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%2f55371314%2fwebpack-encore-unexpected-scss-import-order%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Sorry for this quick self-answer, I've really spent a lot of time before asking, but after it found the solution quickly. Hope, can save smb's time.

You should simply add other styles to app.js. This way they will recompile on any file change (in previous example they recompile only on app.scss change) and the order will become correct:

app.js

require('_global.scss');
require('app.scss');

share|improve this answer

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

add a comment | 

0

Sorry for this quick self-answer, I've really spent a lot of time before asking, but after it found the solution quickly. Hope, can save smb's time.

You should simply add other styles to app.js. This way they will recompile on any file change (in previous example they recompile only on app.scss change) and the order will become correct:

app.js

require('_global.scss');
require('app.scss');

share|improve this answer

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

add a comment | 

Sorry for this quick self-answer, I've really spent a lot of time before asking, but after it found the solution quickly. Hope, can save smb's time.

You should simply add other styles to app.js. This way they will recompile on any file change (in previous example they recompile only on app.scss change) and the order will become correct:

app.js

require('_global.scss');
require('app.scss');

share|improve this answer

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

require('_global.scss');
require('app.scss');

share|improve this answer

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges

answered Mar 27 at 7:09

kpowerkpower

2,78933 gold badges3838 silver badges5959 bronze badges