Next.js：Webpack ExtractTextPlugin没有使用next-sass

Question

我用Next开始了一个新项目，主要问题如下：

• 我的应用程序组成了通过npm转换和安装的外部组件。这个组件需要sass文件

• 我使用Zeit团队提供的简单的withSass模块，因此我可以在我的应用程序中包含这些组件

• 我收到以下错误：

  

/Users/antoine/react-platform/website-gamma/node_modules/star-rating/src/styles/style.scss:1   （函数（exports，require，module，__ filename，__ dirname）{@ import“_vars”;

     

SyntaxError：无效或意外的令牌

我的解释可能是错误的，但看起来加载器工作但ExtractTextPlugin没有替换任何东西。

这是我的next.config.js：

module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]"
    }
});

这是我的Webpack配置（客户端，然后是服务器）：

{ devtool: 'source-map',
  name: 'client',
  cache: true,
  target: 'web',
  externals: [],
  context: '/Users/antoine/react-platform/website-gamma',
  entry: [Function: entry],
  output: 
   { path: '/Users/antoine/react-platform/website-gamma/.next',
     filename: '[name]',
     libraryTarget: 'commonjs2',
     chunkFilename: '[name]-[chunkhash].js',
     strictModuleExceptionHandling: true,
     devtoolModuleFilenameTemplate: '[absolute-resource-path]' },
  performance: { hints: false },
  resolve: 
   { extensions: [ '.js', '.jsx', '.json' ],
     modules: 
      [ '/Users/antoine/react-platform/website-gamma/node_modules/next/node_modules',
        'node_modules',
        '/home/antoine/npm/lib/node_modules' ],
     alias: 
      { next: '/Users/antoine/react-platform/website-gamma/node_modules/next',
        'react$': 'react/cjs/react.development.js',
        'react-dom$': 'react-dom/cjs/react-dom.development.js' } },
  resolveLoader: 
   { modules: 
      [ '/Users/antoine/react-platform/website-gamma/node_modules/next/node_modules',
        'node_modules',
        '/Users/antoine/react-platform/website-gamma/node_modules/next/dist/server/build/loaders',
        '/home/antoine/npm/lib/node_modules' ] },
  module: 
   { rules: 
      [ { test: /\.(js|jsx)(\?[^?]*)?$/,
          loader: 'hot-self-accept-loader',
          include: 
           [ '/Users/antoine/react-platform/website-gamma/pages',
             '/Users/antoine/react-platform/website-gamma/node_modules/next/pages' ] },
        { test: /\.+(js|jsx)$/,
          include: [ '/Users/antoine/react-platform/website-gamma' ],
          exclude: /node_modules/,
          use: 
           { loader: 'babel-loader',
             options: 
              { cacheDirectory: true,
                presets: [],
                plugins: 
                 [ '/Users/antoine/react-platform/website-gamma/node_modules/react-hot-loader/babel.js' ],
                babelrc: true } } },
        { test: /\.scss$/,
          use: 
           [ 'extracted-loader',
             { loader: '/Users/antoine/react-platform/website-gamma/node_modules/extract-text-webpack-plugin/dist/loader.js',
               options: { id: 1, omit: 0, remove: true } },
             { loader: 'css-loader',
               options: 
                { modules: true,
                  minimize: false,
                  sourceMap: true,
                  importLoaders: 1,
                  localIdentName: '[local]___[hash:base64:5]' } },
             { loader: 'sass-loader', options: {} } ] },
        { test: /\.sass$/,
          use: 
           [ 'extracted-loader',
             { loader: '/Users/antoine/react-platform/website-gamma/node_modules/extract-text-webpack-plugin/dist/loader.js',
               options: { id: 1, omit: 0, remove: true } },
             { loader: 'css-loader',
               options: 
                { modules: true,
                  minimize: false,
                  sourceMap: true,
                  importLoaders: 1,
                  localIdentName: '[local]___[hash:base64:5]' } },
             { loader: 'sass-loader', options: {} } ] } ] },
  plugins: 
   [ NoEmitOnErrorsPlugin {},
     FriendlyErrorsWebpackPlugin {
       compilationSuccessInfo: {},
       onErrors: undefined,
       shouldClearConsole: true,
       formatters: [ [Function: format], [Function: format], [Function: format] ],
       transformers: 
        [ [Function: transform],
          [Function: transform],
          [Function: transform] ] },
     NamedModulesPlugin { options: {} },
     HotModuleReplacementPlugin {
       options: {},
       multiStep: undefined,
       fullBuildTimeout: 200,
       requestTimeout: 10000 },
     UnlinkFilePlugin { prevAssets: {} },
     CaseSensitivePathsPlugin { options: {}, pathCache: {}, fsOperations: 0, primed: false },
     LoaderOptionsPlugin {
       options: 
        { options: 
           { context: '/Users/antoine/react-platform/website-gamma',
             customInterpolateName: [Function: customInterpolateName] },
          test: { test: [Function: test] } } },
     { apply: [Function: apply] },
     DefinePlugin { definitions: { 'process.env.NODE_ENV': '"development"' } },
     PagesPlugin {},
     DynamicChunksPlugin {},
     CommonsChunkPlugin {
       chunkNames: [ 'manifest' ],
       filenameTemplate: 'manifest.js',
       minChunks: undefined,
       selectedChunks: undefined,
       children: undefined,
       deepChildren: undefined,
       async: undefined,
       minSize: undefined,
       ident: '/Users/antoine/react-platform/website-gamma/node_modules/webpack/lib/optimize/CommonsChunkPlugin.js0' },
     ExtractTextPlugin { filename: 'static/style.css', id: 1, options: {} } ] }
--------
{ devtool: 'source-map',
  name: 'server',
  cache: true,
  target: 'node',
  externals: [ [Function] ],
  context: '/Users/antoine/react-platform/website-gamma',
  entry: [Function: entry],
  output: 
   { path: '/Users/antoine/react-platform/website-gamma/.next/dist',
     filename: '[name]',
     libraryTarget: 'commonjs2',
     chunkFilename: '[name]-[chunkhash].js',
     strictModuleExceptionHandling: true,
     devtoolModuleFilenameTemplate: '[absolute-resource-path]' },
  performance: { hints: false },
  resolve: 
   { extensions: [ '.js', '.jsx', '.json' ],
     modules: 
      [ '/Users/antoine/react-platform/website-gamma/node_modules/next/node_modules',
        'node_modules',
        '/home/antoine/npm/lib/node_modules' ],
     alias: 
      { next: '/Users/antoine/react-platform/website-gamma/node_modules/next',
        'react$': 'react/cjs/react.development.js',
        'react-dom$': 'react-dom/cjs/react-dom.development.js' } },
  resolveLoader: 
   { modules: 
      [ '/Users/antoine/react-platform/website-gamma/node_modules/next/node_modules',
        'node_modules',
        '/Users/antoine/react-platform/website-gamma/node_modules/next/dist/server/build/loaders',
        '/home/antoine/npm/lib/node_modules' ] },
  module: 
   { rules: 
      [ { test: /\.+(js|jsx)$/,
          include: [ '/Users/antoine/react-platform/website-gamma' ],
          exclude: /node_modules/,
          use: 
           { loader: 'babel-loader',
             options: { cacheDirectory: true, presets: [], plugins: [], babelrc: true } } },
        { test: /\.scss$/,
          use: 
           [ { loader: 'css-loader/locals',
               options: 
                { modules: true,
                  minimize: false,
                  sourceMap: true,
                  importLoaders: 1,
                  localIdentName: '[local]___[hash:base64:5]' } },
             { loader: 'sass-loader', options: {} } ] },
        { test: /\.sass$/,
          use: 
           [ { loader: 'css-loader/locals',
               options: 
                { modules: true,
                  minimize: false,
                  sourceMap: true,
                  importLoaders: 1,
                  localIdentName: '[local]___[hash:base64:5]' } },
             { loader: 'sass-loader', options: {} } ] } ] },
  plugins: 
   [ NoEmitOnErrorsPlugin {},
     NamedModulesPlugin { options: {} },
     UnlinkFilePlugin { prevAssets: {} },
     CaseSensitivePathsPlugin { options: {}, pathCache: {}, fsOperations: 0, primed: false },
     LoaderOptionsPlugin {
       options: 
        { options: 
           { context: '/Users/antoine/react-platform/website-gamma',
             customInterpolateName: [Function: customInterpolateName] },
          test: { test: [Function: test] } } },
     { apply: [Function: apply] },
     DefinePlugin { definitions: { 'process.env.NODE_ENV': '"development"' } },
     NextJsSsrImportPlugin {},
     ExtractTextPlugin { filename: 'static/style.css', id: 2, options: {} } ] }