vue.config.js改为(laravel)webpack.mix.js。

Question

我开始使用Vue CLI模板来使用Vue。在该模板中，你创建了一个名为'vue.config.js'的文件来定义一些设置。更多的内容可以在这里找到。https:/cli.vuejs.orgguidecss.html#css-modules。

我有一个全局csssass文件的设置，所以我所有的组件都可以访问变量（文件只包含vars）。

vue.config.js。

module.exports = {
    // So we can use the template syntages in vue components (correct me if am wrong)
    runtimeCompiler: true,
    // CSS settings
    css: {
        loaderOptions: {
            sass: {
                // Load in global SASS file that we can use in any vue component and any sass file
                data: `
                  @import "@/assets/css/variables.scss";
                `
            }
        }
    }
};

现在我在做另一个项目. 这次我在一个应用中使用了laravel和vue. Laravel让Vue与webpack和webpack.mix.js一起工作.

现在我被卡住了. 我不能创建一个配置,所以全局的css文件与变量可以识别在Vue的 "一个文件组件",我不能找到任何解决方案在互联网上或我自己的经验,使这项工作。

有人有这方面的经验吗？

Answer 1

Laravel mix有一个快捷方式来 "在每个组件的样式中包含一个文件"(请找 GlobalVueStyles 在 可选). 所以只需将下面的代码添加到 webpack.mix.js 文件在项目根目录下。

mix.options({
    globalVueStyles: `resources/assets/css/variables.scss`
});

并安装依赖关系 sass-resources-loader

npm install --save-dev sass-resources-loader

它只适用于相对路径。另外，文档中说，这个选项只有当 extractVueStyles 启用，但我不需要。

要想对 "vue-loader "有更多的控制，你可以使用未被记录的功能。mix.override

mix.override(webpackConfig => {
    // iterate and modify webpackConfig.module.rules array
})