Next.js: Webpack ExtractTextPlugin не извлекает scss в node_modules с next-sass
Я начинаю новый проект с Next, и моя главная проблема заключается в следующем:
Мое приложение состоит из внешних компонентов, которые переносятся и устанавливаются через npm. эти компоненты требуют sass-файлов
Я использую простой модуль withSass, предоставленный командой Zeit, чтобы я мог включить этот компонент в свое приложение
Я получаю следующую ошибку:
/Users/antoine/react-platform/website-gamma/node_modules/star-rating/src/styles/style.scss:1 (функция (экспорт, требуется, модуль, __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: {} } ] }