要导出要导入到Rails 6 webpacker中的所有scss文件的全局scss变量文件,可以按照以下步骤进行操作:
_variables.scss
的文件,用于存放全局scss变量。$primary-color: #007bff;
$secondary-color: #6c757d;
app/javascript/stylesheets
目录下创建一个名为application.scss
的文件。application.scss
文件中使用@import
指令导入所有需要导出的scss文件,例如:@import "variables";
@import "button";
@import "navbar";
application.scss
文件中使用@import
指令导入所有需要导出的scss文件的路径,确保路径正确。.button {
background-color: $primary-color;
}
config/webpack/environment.js
文件中,添加以下配置,以使webpacker能够正确处理scss文件:const { environment } = require('@rails/webpacker');
const sassLoader = environment.loaders.get('sass');
const sassLoaderConfig = sassLoader.use.find(loader => loader.loader === 'sass-loader').options;
// 添加全局scss变量文件的路径
sassLoaderConfig.additionalData = `@import "~stylesheets/variables";`;
module.exports = environment;
这样,全局scss变量文件就成功导入到Rails 6 webpacker中了。在需要使用全局scss变量的地方,可以直接使用定义的变量,而无需重复导入文件。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云