vue.config.js到（laravel）webpack.mix.js

Question

我开始使用Vue CLI模板使用Vue。在该模板中，您创建了一个名为“vue.config.js”的文件来定义一些设置。更多信息请点击此处：https://cli.vuejs.org/guide/css.html#css-模块

我对全局css/sass文件进行了设置，这样我的所有组件都可以访问变量（该文件只包含vars）。

vue.config.js：

模块导出={//所以我们可以在vue组件中使用模板组合（如果我错了，请纠正我）runtimeCompiler:true，//CSS设置css（密件抄送）：{装载机选项：{安全气囊系统：{//加载全局SASS文件，我们可以在任何vue组件和任何SASS文件中使用该文件数据：`@导入“@/assets/css/variables.scss”；`}}}};

现在我正在做另一个项目。这次我在一个应用程序中使用了laravel和vue。Laravel使Vue与webpack和webpack.mix.js协同工作。

现在我陷入了困境。我无法创建一个配置，因此带有变量的全局css文件可以在vue“单文件组件”中识别。我在互联网上或我自己的经验中找不到任何解决方案来实现这一点。

有人对此有经验吗？

Answer 1

Laravel mix有一个快捷方式，可以“指示要包含在每个组件样式中的文件”（查找globalVue样式在中可用选项). 所以只需将下面的代码添加到webpack.mix.js文件位于项目根目录。

混合选项({globalVueStyles:`resources/assets/css/variables.scss`});

并安装依赖项sass-resources-loader

npm install—保存dev-sass资源加载程序

它仅作为相对路径工作。此外，文档表示，此选项仅在以下情况下有效extractVue样式已启用，但我不需要它。

要对“vue-loader”进行更多控制，可以使用未记录的功能混合覆盖

混合覆盖（webpackConfig=>{//迭代和修改webpackConfig.module.rules数组})