vue.config.js到(laravel)webpack.mix.js [英] vue.config.js to (laravel) webpack.mix.js

问题描述

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

I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules

我为全局css/sass文件进行了设置，因此我所有的组件都可以访问变量(该文件仅包含vars).

I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).

vue.config.js:

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一起使用.

Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.

现在这是我被卡住的地方.我无法创建配置，因此带有变量的全局css文件可以在vue一个文件组件"中识别出来，我在互联网上找不到任何解决方案，也无法根据自己的经验来完成此工作.

Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.

有人对此有经验吗?

推荐答案

Laravel mix具有指示文件包含在每个组件样式中的文件"的快捷方式(请在globalVueStyles ="https://laravel-mix.com/docs/5.0/options" rel ="nofollow noreferrer">可用选项).因此，只需将下面的代码添加到项目根目录下的 webpack.mix.js 文件中即可.

Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.

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

并安装依赖项 sass-resources-loader

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

它仅用作相对路径.此外，文档还说此选项仅在启用 extractVueStyles 时才有效，但是我不需要.

It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.

要对"vue-loader"有更多控制，可以使用未记录的函数 mix.override

To have more control over "vue-loader" you can use the undocumented function mix.override

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

这篇关于vue.config.js到(laravel)webpack.mix.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！