代码之家  ›  专栏  ›  技术社区  ›  mdmb

带有CSS/SCSS加载程序的NextJS

  •  0
  • mdmb  · 技术社区  · 5 年前

    我想设置加载程序,我可以加载4种类型的文件到应用程序中:

    1. *.module.css
    2. *.module.scss ;
    3. *.css ;
    4. *.scss

    1和2加载CSS模块,3和4加载常规CSS/SCS。 @zeit/next-css @zeit/next-sass ?

    0 回复  |  直到 5 年前
        1
  •  2
  •   felixmosh    5 年前

    目前 next-css / next-sass 不支持此功能,但您可以自行将其添加到网页包配置中。

    module: true 对于所有导入和所有我想作为常规css处理的文件(即全局),我需要添加, .global

    // next.config.js
    config.module.rules.forEach(rule => {
      if (rule.test && rule.test.toString().includes('.scss')) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === 'string') {
            return {
              loader: useRule,
            };
          }
          if (useRule.loader.startsWith('css-loader')) {
            return {
              oneOf: [
                {
                  test: /\.global\.scss$/,
                  loader: useRule.loader,
                  options: {
                    ...useRule.options,
                    modules: false,
                  },
                },
                {
                  loader: useRule.loader,
                  options: useRule.options,
                },
              ],
            };
          }
    
          return useRule;
        });
    
        delete rule.use;
      }
    });
    

    这段代码查找 css-loader 配置并修改它以支持 .global.scss 后缀。

    顺便说一句,您可以通过以下方式获得更新 this PR

    下一个版本^9.2.0现在有一个 native support for css

        2
  •  2
  •   Hamid    5 年前

    只是想知道你是不是成功了?

    我的下一个.config.js以下文件供参考

    const withSass = require('@zeit/next-sass');
    const withPlugins = require('next-compose-plugins');
    const withSourceMaps = require('@zeit/next-source-maps');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    const sassConfig = {
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 2,
        localIdentName: '[local]___[hash:base64:5]',
      },
      webpack: config => {
        config.module.rules.forEach(rule => {
          if (rule.test && rule.test.toString().match(/\.(sa|sc)ss$/)) {
            rule.rules = rule.use.map(useRule => {
              if (typeof useRule === 'string') {
                return { loader: useRule };
              }
    
              if (useRule.loader.startsWith('css-loader')) {
                return {
                  oneOf: [
                    {
                      test: new RegExp(/\module.(sa|sc)ss$/),
                      exclude: new RegExp(/\.css$/),
                      loader: useRule.loader,
                      options: useRule.options,
                    },
                    {
                      loader: useRule.loader,
                      options: {},
                    },
                  ],
                };
              }
              return useRule;
            });
            delete rule.use;
          }
        });
    
        return config;
      },
    };
    
    module.exports = withPlugins(
      [[withSourceMaps], [withSass, sassConfig]]
    );