使用 webpack 加载 scss 失败
Failed to load scss with webpack
我正在使用 webpack,我想在我的 JavaScript 中加载 scss 文件。 (或者能分开也行)
这是我的 webpack 配置:
"use strict";
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
context: __dirname + '/src',
entry: './js/index.js',
output: {
path: './build',
filename: 'js/app.bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
resolve: {
root: [
path.resolve('./src/js'),
path.resolve('./src/scss')
],
extensions: ['', '.js']
},
plugins: [
new CopyWebpackPlugin([
{ from: 'html/**', to: `${__dirname}/build/html`, flatten: true },
{ from: 'images/**', to: `${__dirname}/build/image`, flatten: true }
])
]
};
这是我的文件列表:
- src/html/index.html -> build/html/index.html(工作)
- src/images/** -> build/images/**(已完成)
- src/js/index.js -> build/js/app.bundle.js(工作)
- src/scss/** -> build/css/** (未使用)
这是我的 JavaScript 代码。刚开始做项目,代码不多:
import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import moduleA from 'moduleA';
import "view/startup.scss";
ReactDOM.render(
<div>
<h1>Helloworld!</h1>
</div>,
document.getElementById('entry')
);
你可以看到这个:import "view/startup.scss";
我想将 scss 文件加载到我的 JavaScript 中,但是当我 运行 webpack 命令时,它说:
ERROR in Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js didn't return a function
@ ./scss/view/startup.scss 4:14-123
在webpack config的"resolve" 属性中,可以看到我为scss添加了另一个根目录,我也加载了sass-loader,但是没有用我不知道为什么。
据我所知,使用 Webpack,包括 css/scss 自动注入到目标文件中,所以它不需要作为单独的文件提取,我只是希望它能工作。
任何帮助将不胜感激:)
* 已更新 *
./scss/view/startup.scss
代码
#startup {
background-color: #7087d7;
}
错误指向原因(我突出了相关部分):
ERROR in Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js didn't return a function @ ./scss/view/startup.scss 4:14-123
当你在 Webpack 中声明一个加载器时,你可以省略 -loader
后缀(所以 css-loader
变成 css
)前提是你没有可能匹配无后缀加载程序名称的其他模块.
这就是你的案例失败的地方,因为你还使用了 css
包,Webpack 试图将其用作加载器(但失败了,因为它不是)。
要解决此问题,请使用完整的加载程序包名称:
loaders : [ "style-loader", "css-loader", "sass-loader" ]
我正在使用 webpack,我想在我的 JavaScript 中加载 scss 文件。 (或者能分开也行)
这是我的 webpack 配置:
"use strict";
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
context: __dirname + '/src',
entry: './js/index.js',
output: {
path: './build',
filename: 'js/app.bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
resolve: {
root: [
path.resolve('./src/js'),
path.resolve('./src/scss')
],
extensions: ['', '.js']
},
plugins: [
new CopyWebpackPlugin([
{ from: 'html/**', to: `${__dirname}/build/html`, flatten: true },
{ from: 'images/**', to: `${__dirname}/build/image`, flatten: true }
])
]
};
这是我的文件列表:
- src/html/index.html -> build/html/index.html(工作)
- src/images/** -> build/images/**(已完成)
- src/js/index.js -> build/js/app.bundle.js(工作)
- src/scss/** -> build/css/** (未使用)
这是我的 JavaScript 代码。刚开始做项目,代码不多:
import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import moduleA from 'moduleA';
import "view/startup.scss";
ReactDOM.render(
<div>
<h1>Helloworld!</h1>
</div>,
document.getElementById('entry')
);
你可以看到这个:import "view/startup.scss"; 我想将 scss 文件加载到我的 JavaScript 中,但是当我 运行 webpack 命令时,它说:
ERROR in Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js didn't return a function @ ./scss/view/startup.scss 4:14-123
在webpack config的"resolve" 属性中,可以看到我为scss添加了另一个根目录,我也加载了sass-loader,但是没有用我不知道为什么。
据我所知,使用 Webpack,包括 css/scss 自动注入到目标文件中,所以它不需要作为单独的文件提取,我只是希望它能工作。
任何帮助将不胜感激:)
* 已更新 * ./scss/view/startup.scss
代码#startup {
background-color: #7087d7;
}
错误指向原因(我突出了相关部分):
ERROR in Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js didn't return a function @ ./scss/view/startup.scss 4:14-123
当你在 Webpack 中声明一个加载器时,你可以省略 -loader
后缀(所以 css-loader
变成 css
)前提是你没有可能匹配无后缀加载程序名称的其他模块.
这就是你的案例失败的地方,因为你还使用了 css
包,Webpack 试图将其用作加载器(但失败了,因为它不是)。
要解决此问题,请使用完整的加载程序包名称:
loaders : [ "style-loader", "css-loader", "sass-loader" ]