Question

我正在使用reactjs和webpack，我正在尝试制作sass的全局变量，因此我可以在任何地方使用它们而无需导入它们。但是我没有成功，我已经将文件添加到了webpack中，但始终是同样的问题。即使是关于stackoverflow的其他解决方案也无法解决我的问题，请问有什么可以帮助的吗？

这是我的index.scss：

def create_new_dicts(cls):

这是我的variables.scss文件：

def create_new_dicts(cls):

这是简单的login.scss，我尝试访问其中一个变量，但显示未定义变量：

@import "../public/scss/variables";
@import "../public/scss/mixin";

感谢您的帮助

Answer 1

您需要使用扩展名进行导入：

    @import "../public/scss/variables.scss";

Answer 2

检查webpack模块规则中的加载程序选项是否正确。

 {
            test: [/\.scss$/, /\.css/],
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader')
                  },
                  use: [
                    {
                      loader: require.resolve('css-loader')
                    },
                    {
                      loader: require.resolve('sass-loader'),
                    },
                    {
                      loader: require.resolve('json-sass-mixin-loader')
                    },
                    {
                      loader: require.resolve('sass-resources-loader'),
                      options: {
                        resources: [
                          'path/to/mixins/*.scss',
                          'path/to/variables.scss']
                      }
                    },
                    {
                      loader: require.resolve('postcss-loader')
                    },
                  ],
                },
              )
            ),

          }

Answer 3

尝试对 options.resources 数组使用绝对路径。示例：

resources: [
 path.resolve(__dirname, './src/styles/variables.scss')
]

或

resources: [
 './src/styles/variables.scss'
]

两者都应该起作用

使用reactjs和webpack的全局scss变量

3 个答案: