Sass-Webpack、React 和 Babel 的加载器无法正常工作
Sass-loader with Webpack, React and Babel not working
我为代码过多而道歉 post。
我是 Node、React 和 Webpack 的新手,也是 sass-loader 的新手。我 运行 遇到了一些看似微不足道的问题,但事实并非如此。
ERROR in ./app/index.js Module not found: Error: Can't resolve
'waterbottle.scss' in '/Volumes/500GB/Webs/waterbottle/app' @
./app/index.js 4:13-40
我试过将 .scss 文件放在应用程序文件夹中,并尝试修改 .scss 路径。
安装:
我用
安装了 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。非常感谢。
Sass loader 文档显示如下:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};
已解决。我需要安装:
npm install style-loader --save
npm install css-loader --save
.scss 文件的路径:
const scss = require("../scss/waterbottle.scss");
我很好奇为什么 sass-loader website 上没有提到这个,或者更好的是 运行
时自动安装
npm install sass-loader node-sass webpack --save-dev
我为代码过多而道歉 post。
我是 Node、React 和 Webpack 的新手,也是 sass-loader 的新手。我 运行 遇到了一些看似微不足道的问题,但事实并非如此。
ERROR in ./app/index.js Module not found: Error: Can't resolve 'waterbottle.scss' in '/Volumes/500GB/Webs/waterbottle/app' @ ./app/index.js 4:13-40
我试过将 .scss 文件放在应用程序文件夹中,并尝试修改 .scss 路径。
安装:
我用
安装了 sass-loadernpm 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。非常感谢。
Sass loader 文档显示如下:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};
已解决。我需要安装:
npm install style-loader --save
npm install css-loader --save
.scss 文件的路径:
const scss = require("../scss/waterbottle.scss");
我很好奇为什么 sass-loader website 上没有提到这个,或者更好的是 运行
时自动安装npm install sass-loader node-sass webpack --save-dev