我为代码繁重的帖子道歉 .
我是Node,React和Webpack的新手,也是第一次使用sass-loader的用户 . 我遇到了一些似乎微不足道的问题,但事实并非如此 .
./app/index.js中的错误找不到模块:错误:无法解析'/ Volumes / 500GB / Webs / waterbottle / app'中的'waterbottle.scss'@ . / app / index.js 4:13- 40
我已经尝试将.scss文件放在app文件夹中,以及摆弄.scss路径 .
Installation:
我安装了sass-loader
npm install sass-loader node-sass webpack --save-dev
webpack.config.js 看起来像这样
var path = require('path');
var webpack = require('webpack');
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: __dirname + '/app/index.js',
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
],
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.build.js'
},
plugins: [HTMLWebpackPluginConfig],
stats: {
colors: true
},
devtool: 'source-map',
watch: true
};
package.json 在devDependencies中包含此内容
"node-sass": "^4.5.3",
index.js 包含
const scss = require("waterbottle.scss");
文件结构:
我的理解是sass-loader应该自动将css注入dom . 提前谢谢了 .
2 回答
Sass loader文档显示如下:
解决了 . 我需要安装:
和.scss文件的路径:
我很好奇为什么在sass-loader website上没有提到它,或者更好的是,在运行时自动安装