Javascript 从网页包解析手写笔导入文件';s解析目录(绝对路径)
版本:Javascript 从网页包解析手写笔导入文件';s解析目录(绝对路径),javascript,css,reactjs,webpack,stylus-loader,Javascript,Css,Reactjs,Webpack,Stylus Loader,版本: stylus: 0.54.5 stylus-loader: 3.0.2 webpack: 4.30.0 src |_ css |_ base |_ _vars.styl |_ another.styl |_ js |_ some |_ some.js => (It has "import './some.styl'") |_ some.styl const paths = { css: path.joi
stylus: 0.54.5
stylus-loader: 3.0.2
webpack: 4.30.0
src
|_ css
|_ base
|_ _vars.styl
|_ another.styl
|_ js
|_ some
|_ some.js => (It has "import './some.styl'")
|_ some.styl
const paths = {
css: path.join(__dirname, '../src/css/'),
javascript: path.join(__dirname, '../src/js'),
};
// module.rules for stylus loader
{
loader: 'stylus-loader',
options: {
sourceMap: !IS_PRODUCTION,
preferPathResolver: 'webpack' // Doesn't make any difference
},
}
const resolve = {
extensions: [
'.webpack-loader.js',
'.web-loader.js',
'.loader.js',
'.js',
'.jsx',
'.styl', // Doesn't make any difference
'.css', // Doesn't make any difference
],
modules: ['node_modules', paths.javascript, paths.css],
};
文件夹结构:
stylus: 0.54.5
stylus-loader: 3.0.2
webpack: 4.30.0
src
|_ css
|_ base
|_ _vars.styl
|_ another.styl
|_ js
|_ some
|_ some.js => (It has "import './some.styl'")
|_ some.styl
const paths = {
css: path.join(__dirname, '../src/css/'),
javascript: path.join(__dirname, '../src/js'),
};
// module.rules for stylus loader
{
loader: 'stylus-loader',
options: {
sourceMap: !IS_PRODUCTION,
preferPathResolver: 'webpack' // Doesn't make any difference
},
}
const resolve = {
extensions: [
'.webpack-loader.js',
'.web-loader.js',
'.loader.js',
'.js',
'.jsx',
'.styl', // Doesn't make any difference
'.css', // Doesn't make any difference
],
modules: ['node_modules', paths.javascript, paths.css],
};
在import'base/_vars.styl'
some.js中运行良好
- 如果导入到另一个.styl文件中,它也可以正常工作<代码>@import'base/_vars.styl'
- 但是,它在
some.styl中不起作用。我必须使用相对路径使其工作
@import'../../css/base/_vars.styl'
stylus: 0.54.5
stylus-loader: 3.0.2
webpack: 4.30.0
src
|_ css
|_ base
|_ _vars.styl
|_ another.styl
|_ js
|_ some
|_ some.js => (It has "import './some.styl'")
|_ some.styl
const paths = {
css: path.join(__dirname, '../src/css/'),
javascript: path.join(__dirname, '../src/js'),
};
// module.rules for stylus loader
{
loader: 'stylus-loader',
options: {
sourceMap: !IS_PRODUCTION,
preferPathResolver: 'webpack' // Doesn't make any difference
},
}
const resolve = {
extensions: [
'.webpack-loader.js',
'.web-loader.js',
'.loader.js',
'.js',
'.jsx',
'.styl', // Doesn't make any difference
'.css', // Doesn't make any difference
],
modules: ['node_modules', paths.javascript, paths.css],
};
注意:从resolve目录导入JS文件和css在JS文件中工作正常
有趣的是,sass加载程序的相同网页配置可以正常工作我遗漏了什么?