[英]Next.js babel loader wont load scss files
我正在运行next.js项目,但是具有不同的目录结构:
> core
> server
> index.js
> site
> components
> pages
> static
> styles
我已经在服务器index.js
文件中的next.js对象中设置了目录。 例如( const nextLoader = next({dev, dir: './site'});
)。
当我运行npm run dev
它可以成功地与next一起构建,但是忘记了scss。 我目前收到此错误:
ModuleParseError: Module parse failed: /home/dillonraphael/Desktop/creatorsneverdie/site/static/styles/main.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "~bulma";
在将目录设置为next.js对象之前,我没有遇到这个问题。
这是我的next.config.js
文件:
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
module.exports = {
webpack: (config, { dev }) => {
config.plugins.push(
new webpack.EnvironmentPlugin(process.env)
);
config.module.rules.push({
/**
* Image handler + compresses images
*/
test: /.*\.(gif|png|jpe?g|svg)$/i,
use: [{
loader: 'url-loader',
options: {
// name: production ? '[name]-[sha512:hash:base64:7].[ext]' : '[name].[ext]',
name: '[name].[ext]',
limit: 1000
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 4
},
pngquant: {
quality: '75-90',
speed: 3
}
}
}]
},
{
test: /\.(css|scss)/,
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
}
,
{
test: /\.css$/,
use: ['babel-loader', 'raw-loader']
}
,
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
]
}
)
return config
}
}
和我的.babelrc
文件:
{
plugins: [
"inline-react-svg",
"styled-jsx/babel",
["module-resolver", { "root": ["."], "alias": {"styles": "./site/static/styles"}, "cwd": "babelrc"}],
["wrap-in-js", {"extensions": ["css$", "scss$"]}]
],
presets: [
"next/babel", "es2015", "stage-0"
],
ignore: [ ]
}
注意,我什至正确设置了别名: "alias": {"styles": "./site/static/styles"}
任何帮助都将是惊人的!
在玩了几个小时之后,我发现了。 您必须将next.config.js
文件放置在目录dir: './site'
。 dir: './site'
./ dir: './site'
内的目录中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.