razzle-plugin-scss

此软件包包含了一个插件，用于在 Razzle 中使用 SCSS/SASS

在 Razzle 项目中使用

yarn add razzle-plugin-scss --dev

使用默认选项

// razzle.config.js
module.exports = {
  plugins: ['scss'],
};

名称中以.module.scss 和 .module.sass 结尾的文件会加载为 cssModules

示例

import s from './myfile.module.scss';

使用自定义选项

// razzle.config.js
module.exports = {
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    },
  ],
};

选项

请记住，自定义选项将使用 Object.assign 扩展默认选项。例如 postcss.plugins 这样的数组将不会被扩展或连接，它会覆盖所有默认插件。

postcss

默认

{
  dev: {
    sourceMap: true,
    ident: 'postcss',
  },
  prod: {
    sourceMap: false,
    ident: 'postcss',
  },
  plugins: [
    PostCssFlexBugFixes,
    autoprefixer({
      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
      flexbox: 'no-2009',
    }),
  ],
}

将 dev 设置为在 development 中添加配置到 postcss。将 prod 设置为在 production 中添加配置到 postcss。

参见 postcss 加载器选项来覆盖配置。

sass

默认

{
  dev: {
    sassOptions: {
      sourceMap: true,
      includePaths: [paths.appNodeModules],
    },
  },
  prod: {
    sassOptions: {
      sourceMap: true,
      sourceMapContents: false,
      includePaths: [paths.appNodeModules],
    },
  },
},

将 dev 设置为在 development 中添加配置到 postcss。将 prod 设置为在 production 中添加配置到 postcss。

参见 node-sass 选项来覆盖配置。

css

默认

{
  dev: {
    sourceMap: true,
    importLoaders: 1,
    modules: {
      auto: true,
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  },
  prod: {
    sourceMap: razzleOptions.enableSourceMaps,
    importLoaders: 1,
    modules: {
      auto: true,
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  },
},

将 dev 设置为在 development 中添加配置到 postcss。将 prod 设置为在 production 中添加配置到 postcss。

参见 css 加载器选项来覆盖配置。

样式

默认

{
}

样式加载器仅在开发环境中使用。

请参阅样式加载器选项来覆盖配置。

resolveUrl

默认

{
  dev: {},
  prod: {},
}

将 dev 设置为在 development 中添加配置到 postcss。将 prod 设置为在 production 中添加配置到 postcss。

请参阅 resolve url 加载器选项来覆盖配置。