Webpack build the Scss file separately with the. Vue component to build a pit of scss

Building Scss in the portal main.js is through the introduction of modules

Import './assets/_reset.scss'./assets/_flex.scss './assets/_functions.scss ';

is built separately in the. Vue component

<style lang= "scss" scoped>     {        width: rem (300px);    } {width: rem (750px);        }            </style>

The REM () inside is a scss function defined in the _FUNCTIONS.SCSS.

@function REM ($px) {    @return ($px/40px) * 1REM;}

However, this REM () function has not been used, looking for a problem for a long time, of course, the final solution.

Webpack introduced in the Main.js Scss compile, respectively, each scss file into a CSS file placed in the head of the HTML document, there are 3 scss directly into 3 CSS files

Put it in the head (in the case where Webpack.config.js only introduces the SCSS loader, not the CSS plugin). Therefore, the function in _functions.scss is useless, and the function of SCSS is only in one

The whole big scss can work in the place where the function needs to be used, and we. The Scss and _functions.scss in Vue are not in a file, so the SCSS function fails.

What's the way?

One way is to move all the scss out. Vue, together with all the scss files, consists of a large scss file scss the @import way, and finally compiled into a CSS file;

Another way to do this is to introduce the function scss alone through @import to the. vue file that needs the function.

Webpack build the Scss file separately with the. Vue component to build a pit of scss