[英]React storybook sass-loader import node_modules
I'm using sass-loader to load my scss files inside my project and also using the node_modules resolver eg: @import '~styleguide/src/vars.scss'
我正在使用sass-loader在我的项目中加载我的scss文件,并使用node_modules解析器,例如: @import '~styleguide/src/vars.scss'
When i'm trying to load react-storybook i'm passing this to webpack.config.js
当我正在尝试加载react-storybook时,我将其传递给webpack.config.js
const path = require('path');
const autoprefixer = require('autoprefixer');
// load the default config generator.
var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');
module.exports = function(config, env) {
var config = genDefaultConfig(config, env);
config.module.loaders.push({
test: /\.html$/, loader: 'raw'
});
config.module.loaders.push({
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'postcss-loader', 'sass?config=sassLoader']
});
config.sassLoader = {
includePaths: [
path.resolve(__dirname, '..', 'src/scss')
],
sourceMap: true
}
config.postcss = function() {
return [autoprefixer];
}
return config;
};
From what i can read from sass-loader
the node_module resolve should be automatic but it appears is not working: 从我从sass-loader
读取的内容中,node_module解析应该是自动的但看起来不起作用:
here's the error message 这是错误信息
ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?config=sassLoader!./src/component.scss
Module build failed:
@import '~styleguide/src/vars';
^
File to import not found or unreadable: ~styleguide/src/vars
Parent style sheet: stdin
Anyone has an idea why this is happening? 任何人都知道为什么会这样?
This is working for us: 这对我们有用:
/* eslint-env node */
const path = require('path');
const include = path.resolve(__dirname, '..', 'src');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
include
}
]
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.