sass-resources-loader
时间: 2023-05-03 21:00:22 浏览: 278
b'sass-resources-loader' 是一个用于Webpack打包工具的loader,它允许在所有scss/sass文件之间共享变量、mixin等资源,从而避免在每个scss/sass文件中单独导入这些资源。
相关问题
const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ // 基本路径 整个文件夹在哪 publicPath: "./", // 输出文件目录 文件夹名 outputDir: "scjwap", // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 资源放的目录 assetsDir: "./static", transpileDependencies: true, devServer: { proxy: { "/api": { // 匹配所有以 '/api1'开头的请求路径 target: "http://172.16.0.40:8080", // 代理目标的基础路径 changeOrigin: true, }, }, }, chainWebpack: config => { const oneOfsMap = config.module.rule('less').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resources-loader') .options({ resources: 'src/assets/qin.less'// 全局less文件的地址 }) .end() }) } });
这段代码是一个 Vue.js 项目的配置文件,主要包含以下内容:
- publicPath: 表示应用被部署在服务器的基础路径,默认为“/”,这里设置为“./”表示在当前路径下部署。
- outputDir: 表示打包后生成的文件目录,这里设置为“scjwap”。
- assetsDir: 表示静态资源文件夹的名称,这里设置为“./static”表示在 outputDir/scjwap/static 目录下。
- transpileDependencies: 表示 Babel 是否转译依赖,默认为 false,这里设置为 true 表示转译依赖。
- devServer: 表示开发服务器的配置,其中 proxy 字段表示代理配置,将以“/api”开头的请求代理到“http://172.16.0.40:8080”。
- chainWebpack: 表示配置 Webpack 的链式操作,这里是为了使用 sass-resources-loader,将“src/assets/qin.less”文件作为全局 Less 文件引入。
总体来说,这个配置文件的作用是为 Vue.js 项目提供一些基本的配置信息,包括静态资源路径、打包输出路径、代理配置等等。
style-resources-loader
style-resources-loader是一个Webpack加载器,它可以将全局样式资源注入到每个模块中。这样,我们就可以在每个模块中使用全局样式资源,而不必在每个模块中都手动引入它们。这个加载器可以用于处理CSS、Sass、Less等样式文件。