vue.config.js 使用style-resources-loader 怎么配置pluginOptions全局使用变量

你可以在 `vue.config.js` 中进行如下配置：

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'scss',
        patterns: [
            path.resolve(__dirname, './src/styles/variables.scss'),
        ]
    }
  }
}

这里的 `preProcessor` 表示你使用的 CSS 预处理器类型，比如 `scss` 或 `less`，`patterns` 表示需要引入的全局变量文件路径。

然后在项目中使用这些全局变量，可以在组件中这样引入：

<style lang="scss">
@import "@/styles/variables.scss";

/* 这里就可以使用 variables.scss 中定义的变量了 */
</style>

注意，这里的 `@` 符号是一个别名，指向 `src` 目录。如果你没有配置过别名，则需要写成相对路径或者绝对路径。

相关问题

vue.config.js配置style-resources-loader在components使用颜色变量报错

使用`style-resources-loader`可以方便地在所有`vue`组件中共享样式资源，但是在使用颜色变量时可能会出现报错。

这是因为在`vue-loader`中默认开启了CSS modules，导致样式文件的作用域被限定在组件内部，而无法在全局中使用。解决方法如下：

1. 在`vue.config.js`中关闭CSS modules

module.exports = {
  css: {
    modules: false
  }
}

2. 在使用`style-resources-loader`时指定类型为全局

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .oneOf('vue')
      .use('style-resource')
      .loader('style-resources-loader')
      .options({
        patterns: [
          path.resolve(__dirname, './src/styles/variables.scss')
        ],
        // 指定类型为全局
        injector: 'global'
      })
      .end()
  }
}

这样就可以在所有`vue`组件中使用共享的样式资源了，其中包括使用颜色变量。

vue3创建样式默认样式怎么在配置vue.config.js

您可以在 `vue.config.js` 文件中使用 `css` 属性来配置默认样式。例如，以下代码将在所有组件中自动添加 `normalize.css` 的样式：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('normalize.css')()
        ]
      }
    }
  }
}

您还可以使用 `sass-resources-loader` 将全局样式变量注入到所有组件中，例如：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/variables.scss";
        `
      }
    }
  }
}

这将在所有组件中自动注入 `variables.scss` 文件中定义的全局样式变量。