Question

我在项目中的scss目录：

src/styles/
├── base
│   ├── _global.scss
│   └── _normalize.scss
├── libraries
│   └── _antd-custom.scss
├── utilities
│   └── _utilities.scss
├── variables
│   └── _colors.scss
├── base.scss
└── settings.scss

base.scss 导入全局和基本的scss文件：

@import 'src/styles/base/normalize';
@import 'src/styles/base/global';

@import 'src/styles/libraries/antd-custom';
@import 'src/styles/utilities/utilities';

settings.scss 导入配置样式，例如变量，mixin，函数。

@import 'src/styles/variables/colors';

settings.scss将先于其他scss文件加载。

webpack.conf.js

rules: [
  // styles
  {
    test: /\.(s)css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins() {
            return [autoprefixer()]
          },
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
          // load settings scss files before
          data: '@import "src/styles/settings.scss";',
        },
      },
    ],
    exclude: /node_modules/,
  },
}

base.scss将导入到应用程序入口点：

src / index.js

import 'src/styles/base.scss'

结果是settings.scss有效，但base.scss无效。

是否应该在webpack的 sass loader 选项中同时导入setting.scss和base.scss文件？还是其他更好的解决方案？

React集成scss的最佳实践是什么？

0 个答案: