vue.config.js到(laravel)webpack.mix.js

时间:2019-05-07 09:17:45

标签: laravel vue.js laravel-mix

我开始使用Vue CLI模板使用Vue。在该模板中,创建一个名为“ vue.config.js”的文件以定义一些设置。在此处找到更多信息:https://cli.vuejs.org/guide/css.html#css-modules

我为全局css / sass文件进行了设置,因此我所有的组件都可以访问变量(该文件仅包含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“一个文件组件”中识别出来,我无法在互联网上找到任何解决方案,也无法根据自己的经验来完成此工作。

有人对此有经验吗?

1 个答案:

答案 0 :(得分:1)

Laravel mix具有一个快捷方式来“指示要包含在每个组件样式中的文件”(在option available中查找 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
})