作者:寒宝儿_____ | 来源:互联网 | 2023-02-12 19:29
使用Webpack 2和 sass-loader 4.11
webpack --config webpack.config.js
这是我的webpack.config.js
var path = require('path');
var sass = require("./sass/lifeleveler.scss");
module.exports = {
entry: './dist/main.js',
output: {
filename: 'lifeleveler.app.js',
path: path.resolve(__dirname, 'dist')
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
loaders: [
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './sass')
],
loaders: ["style-loader", "css-loader", "sass-loader"]
}
],
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
}
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./sass")]
},
resolve: {
modulesDirectories: ['./sass'],
extensions: [".tsx", ".ts", ".js", "scss"]
},
devtool: 'inline-source-map'
};
请注意,当我在配置的顶部尝试此操作时:
var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");
得到此错误:
错误:找不到模块'!raw-loader!sass-loader!./ sass/lifeleveler.scss'
这就是为什么我这样做的原因: var sass = require("./sass/lifeleveler.scss");
还有我的lifeleveler.scss文件(来自我的SASS项目入门套件):
@import "vendors/normalize"; // Normalize stylesheet
@import "vendors/reset"; // Reset stylesheet
@import "modules/base"; // Load base files
@import "modules/defaults"; // Defaults elements
@import "modules/inputs"; // Inputs & Selects
@import "modules/buttons"; // Buttons
@import "modules/layout"; // Load Layouts
@import "modules/svg"; // Load SVG
@import "modules/queries"; // Media Queries
最后我的文件夹结构,你看到任何明显的问题吗?
我在这里找到了这个解决方案,但是我添加了我./sass
的modulesDirectories
数组路径并仍然收到错误.
经过更多的挖掘后,我也发现了这个Github问题和解决方案,但他的修复对我来说也不起作用:(
1> mrlew..:
我在这里复制了你的问题,并且能够解决它.
首先,您需要更改webpack配置文件.一些要点:
把yout scss
loader放在rules
选项中并将每个加载器分成一个对象(就像这样);
摆脱var sass = require("./sass/lifeleveler.scss");
配置顶部的线.应该从入口点JS调用该文件.在这种情况下:dist/main.js
.此时(在读取配置之前),webpack未配置为加载任何内容.这导致你出现的错误.
摆脱sassLoader.includePaths
和resolve.modulesDirectories
,因为他们是无效的WebPack 2个键.
Webpack 2配置结构与Webpack 1略有不同(您可以在此处查看官方迁移指南).
工作webpack.config.js
文件是这样的:
var path = require('path');
module.exports = {
entry: './dist/main.js',
output: {
filename: 'lifeleveler.app.js',
path: path.resolve(__dirname, 'dist')
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
rules: [
{
test: /\.scss$/,
include: [
path.resolve(__dirname, "sass")
],
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js", "scss"]
},
devtool: 'inline-source-map'
};
在你的main.js
,现在你可以要求你的scss文件调用:
require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist
请确保你已经安装了故宫style-loader
,css-loader
,node-sass
和sass-loader
.
现在编译正确!