我开始使用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“一个文件组件”中识别出来,我无法在互联网上找到任何解决方案,也无法根据自己的经验来完成此工作。
有人对此有经验吗?
答案 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
})