create-react-app 配置全局的less/scss

項目中有全局的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哈哈...,仍是但願大家查閱一下資料，掌握知識，歡迎小夥伴來學習、交流、留言。