项目中有全局的less、scss文件时，我们的模块使用时，需要引入才能使用，有没有办法只引入一次，或者把它配置在webpack里呢？这篇文章讲到的就是create-react-app（16.8.X）版本的使用方法。sass-resources-loader和style-resources-loader，这两个模块。以下是配置方法

1.使用的版本

react：16.8.6
webpack：4.29.6

2.先安装style-resources-loader和sass-resources-loader，找到 config文件下的webpack.config.js（npm run eject）

2.1 sass-resources-loaders使用方法，不废话了，直接贴代码。

{
	test: sassRegex,
	exclude: sassModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 3,
			modules: true, // css-module
			localIdentName: "[name]-[local]-[hash:base64:5]", // css-module hash
			sourceMap: isEnvProduction && shouldUseSourceMap // 是否map
		},
		"sass-loader"
	).concat({
		// 全局的 样式不需要每次 @import
		loader: "sass-resources-loader",
		options: {
			resources: [path.resolve(__dirname, "../src/common/common.scss")]
		}
	}),
	sideEffects: true
},

注：路径一定要是绝对路径

2.2 style-resources-loader的使用方法和scss大致一样的，只是参数不同，意思不懂的查一下，附上代码

{
	test: lessRegex,
	exclude: /node_modules/,
	use: getStyleLoaders(
		{
			// javascriptEnabled: true,
			importLoaders: 2,
			modules: true,
			localIdentName: "[name]-[local]-[hash:base64:5]",
			sourceMap: isEnvProduction && shouldUseSourceMap
		},
		"less-loader"
	).concat({
		loader: require.resolve("style-resources-loader"),
		options: {
			patterns: [path.resolve(__dirname, "../src/common/common.less")]
		}
	}),
	sideEffects: true
},

注：路径同样是绝对路径，patterns的值是 “string” 、[ "string" ]

以上就是less/scss 在webpack中引入全局变量的方法，我在选择附上图片和代码时纠结了一会儿，我要把图片换成代码，方便你们Ctrl+C、Ctrl+V哈哈...,还是希望你们查阅一下资料，掌握知识，欢迎小伙伴来学习、交流、留言。

来源：oschina

链接：https://my.oschina.net/u/4056238/blog/3155925

标签

Webpack