webpack 配置scss||less全局样式（自定义的，vue-cli23）

一般的，引入全局设置的基本样式

这样在引入scss文件中可以使用 base 里的全局变量
但是 避免在资源文件中使用SASS @ import 规则，因为它会降低增量构建的速度。直接在webpack config 中的 sassResources 数组中添加导入的文件。
以 scss 为例, 在自己配的webpack,和vue-cli2/3中配置全局样式引入
（ sass-resources-loader 也可以用来配置 less ）

确保packagejson有 node-sass ， sass-loader ， style-loader
安装 sass-resources-loader sass-resources-loader

再在配置中更改

安装 sass-resources-loader
修改build中的utilsjs

安装 sass-resources-loader
修改build中的utilsjs

vueconfigjs
不需要安装 sass-resources-loader
只需要确保安装了 node-sass sass-loader

有些会报错

这样配置后在

直接使用

vueconfigjs

确保安装了 node-sass sass-loader

vueconfigjs

使用npm安装less

安装less-loader

注意使用高版本run serve会有问题 这里使用的7x版本

安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader

在vueconfigjs文件中配置

注意目录配置方式 /src/assets/css/baseless 修改你全局less文件所在的位置 目录不可使用简写方式 例如 @/assets 方式

使用方式

注：不需要在任何地方导入less文件就可以使用了

使用npm安装less和less-loader

注意：此处也可以合并指令

在 viteconfigts 文件中配置

使用npm安装less和less-loader

注意：此处也可以合并指令，也可以简写

在 viteconfigts 文件中配置

样式的使用方式是跟之前的一样，文中也有提到，可以翻看记录。

点赞加关注，永远不迷路

是一种采用各种分配算法把网络请求分散到一个服务器集群中的可用服务器上去，通过管理进入的Web数据流量和增加有效的网络带宽，从而使网络访问者获得尽可能最佳的联网体验的硬件设备。 负载均衡器有多种多样的形式，除了作为独立意义上的负载均衡器外，有些负载均衡器集成在交换设备中，置于服务器与Internet链接之间，有些则以两块网络适配器将这一功能集成到PC中，一块连接到Internet上，一块连接到后端服务器群的内部网络上。 一般而言，硬件负载均衡在功能、性能上优于软件方式，不过成本昂贵。当Web服务器为图像服务、SSL（安全套接层）会话或数据库事务而进行优化时，负载均衡器可以体现特别的价值。 当需要进行服务器升级或系统维护时，保证稳定的服务器退出服务以避免服务中断。当选定某台服务器要退出服务后，将不会将任何新的用户分配到该服务器。但是，它可以要该服务器完成对当前用户的服务。从而保证了无中断的优质服务，并且简化了服务器群的管理。 智能的服务器服务恢复 将重新启动的服务器应用到服务中时，避免新服务器因突然出现的流量冲击导致系统故障是非常重要的。所以，在将新服务器引入服务器群时，将逐渐地增加分配到该服务器的流量，直至达到其完全的处理能力。从而不仅保证用户在服务器退出服务时，同时还保证服务器在启动期间以及应用程序开始时，均能获得不间断服务

    在Vue中引用外部SCSS(SCSS里面使用了)时，loader报错：

/images/xxxpng in /node_modules/css-loader{"sourceMap":false}!/node_modules/vue-loader/lib/style-compiler{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!/node_modules/sass-loader/lib/loaderjs{"sourceMap":false}!/node_modules/vue-loader/lib/selectorjstype=styles&index=0&bustCache!/src/Appvue

    原因：

        1 某scss文件引用了其它目录的文件

        2 在appvue中使用scss时，用scss的语法引入了该scss文件

        3 最终loader解析路径出错
需要先安装 node-sass及sass-loader

npm i node-sass --save-dev

npm i sass-loader --save-dev

<style lang="scss">

    @import '/assets/style/indexscss'

</style>

这种引入方法的前提是：在scss中没有使用到时编译通过。当在scss中引用时，编译报错，loader错。原因是路径解析错误。
test {

background-image:url("/images/xxxpng");

}

require('/assets/style/indexscss')

或 import '/assets/style/indexscss'
<style lang="scss">

    @import '~@/assets/style/index'

</style>

css loader 会把非根路径的url解析为相对路径，加`~`前缀才解析为模块路径。

在indexscss中使用：

test {

    background-image: url("/assets/image/xxxpng");

    background-repeact: no-repeact;

}

最近在学习vue框架，在执行npm run dev的时候 出现如下错误：

This dependency was not found:

我的是因为引入scss文件报错，就是style加上lang scss就不行了。

解决思路：

npm install sass-loader --save;

npm install node-sass --save;

然后运行npm run start就可以

安装COMPASS。方法：gem install compass

Compass有五个模块reset、 css3、 layout、 typography、 utilities，要导入指定模块的话，在scss文件中使用如下语法：

@import "compass/reset";

---