webpack的sass-loader不会find没有下划线前缀的基础scss文件
最近,我正在开发带有webpack , sass , bower和foundation5的快速前端开发工具链。
我遇到一个问题:sass-loader只加载下划线前缀的 scss文件。
环境
节点v0.12.4
webpack 1.9.11
节点sass 3.2.0
sass-loader 1.0.2
os gentoo 3.18
webpack.config.js
var webpack = require('webpack'); var path = require('path'); var getDir = function() { var args = Array.prototype.slice.call(arguments); return path.join.apply(path, [__dirname].concat(args)); }; module.exports = { // webpack options context: getDir('./src'), entry: { test: "./style/test.scss" }, output: { path: getDir('./build'), filename: "[name].js" }, module: { loaders: [ { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&includePaths[]=" + getDir('bower_components', 'foundation', 'scss')} ] }, progress: false, // Don't show progress // Defaults to true failOnError: true, // don't report error to grunt if webpack find errors // Use this if webpack errors are tolerable and grunt should continue watch: true, // use webpacks watcher // You need to keep the grunt process alive keepalive: false, // don't finish the grunt task // Use this in combination with the watch option devtool: 'eval' };
test.scss
@import "settings"; @import "normalize"; @import "foundation/components/panels"; @import "foundation/components/type";
settings.scss
empty file
项目布局
– bower_componets
– package.json
– src
– 风格
— test.scss
— settings.scss
– webpack.config.js
当我运行webpack命令时,我得到错误:
错误在../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co mponents / foundation / scss!./ style / test.scss
模块构build失败:@import“normalize”; ^文件导入找不到或不可读:./_normalize.scss /home/ray/test/testsassloader/src/style/test.scss(第2行,第9列)@ ./style/test.scss 4:14- 220
虽然,我复制bower_components /基础/ scss / normalize.scss bower_components /基金会/ scss / _normalize.scss ,它的工作原理。
所以我尝试运行没有_normalize.scss node-sass:
./node_modules/node-sass/bin/node-sass --include-path=$(pwd)/bower_components/foundation/scss/ src/style/test.scss
有用!!!
我的结论是,这是webpackparsing器导致问题! 任何人都可以帮我解决问题? 副本是否做正确的工作?
在webpack.config中添加bower组件目录来parsingmodulesDirectories,
{ ... resolve: { modulesDirectories: ['./bower_components', 'node_modules'] }, module: { ... } ... }
然后,在test.scss中像这样导入基础:
@import "settings"; @import "~foundation/scss/normalize"; @import "~foundation/scss/foundation";
- 带有webpack css-loader的源文件
- 将gatsby项目从css转换为scss,在丢失网格预处理方面存在问题
- NODE.JS如何使用node.js显示我的CSS文件夹内的名为CSS的文件夹,其中我的server.js和index.html位于文件夹之外
- 我怎样才能在节点js发送一个响应邮件
- ReferenceError:在Webpack中使用ExtractTextPlugin时没有定义窗口
- 使用节点在SASS编译期间注入variables
- 为什么css-nano(几乎)不起作用?
- Webpack,sass-loader(或css-loader)在node_modules里嵌套文件导入。 文件未find
- Bootstrap没有按预期工作