sass-resources-loader Sass 相关资源

sass-resources-loader

Sass-resources-loader 是一个 webpack loader，它可以将一组 Sass 文件作为全局资源导入到每个 Sass 模块中。它的目的是让你可以在项目中使用全局变量、函数、混合等，而不必在每个文件中重复定义。

Sass-resources-loader 的使用非常简单，只需要在 webpack 配置文件中加入如下代码即可：

{
    test: /\.scss$/,
    use: [{
        loader: 'style-loader' // creates style nodes from JS strings 
    }, {
        loader: 'css-loader' // translates CSS into CommonJS 
    }, {
        loader: 'sass-loader' // compiles Sass to CSS 
    }, {  // 加载 sass 资源文件 
        loader: 'sass-resources-loader',  // 加载 sass 资源文件 
        options: {   // 这里放入你要引入的 sass 资源文件  
            resources: ['./src/assets/styles/variables.scss']   // 这里放入你要引入的 sass 资源文件   }] }

这样就可以在项目中使用 variables.scss 里定义的变量了。当然，你也可以将多个 scss 文件放到 resources 数组中，这样就能够同时引用多个 scss 文件了。

此外，sass-resources-loader 还有一些高级功能，例如你可以通过 includePaths 配置来解决 scss 文件之间的依赖问题。includePaths 参数会将所有传递进去的路径都加到 node_modules 目录之前，这样就能够保证 scss 文件拿到正确的依赖了。

Sass 相关资源