Webpack2 不理解我的 SASS 文件中的 @import 语句(如何使用 webpack2 编译 SASS?) [英] Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)
问题描述
这是我的 webpack.config.js
var path = require('path');var sass = require("./sass/lifeleveler.scss");模块.出口 = {条目:'./dist/main.js',输出: {文件名:'lifeleveler.app.js',路径:path.resolve(__dirname, 'dist')},看:真的，手表选项:{聚合超时:300，民意调查:1000，忽略:/node_modules/},模块: {装载机: [{测试:/.scss$/,包括: [path.resolve(__dirname, 'node_modules'),path.resolve(__dirname, './sass')],加载器:[样式加载器"，css-加载器"，sass-加载器"]}],规则: [{测试:/.tsx?$/,loader: 'ts-loader',排除:/node_modules/，},{强制执行:'预'，测试:/.tsx?$/,使用:源映射加载器"}]},sassLoader:{includePaths: [path.resolve(__dirname, "./sass")]},解决: {模块目录:['./sass']，扩展名:[.tsx"、.ts"、.js"、scss"]},开发工具:'内联源映射'};<小时>
请注意，当我在配置顶部尝试此操作时:
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 路径添加到 modulesDirectories 数组中，但仍然出现错误.
经过更多的挖掘，我还发现了这里的 Github 问题和解决方案，但他的修复对我也不起作用:(
我在这里重现了您的问题，并且能够修复它.
首先，您需要更改您的 webpack 配置文件.几点:
- 把你的
scss加载器放在rules选项中，并将每个加载器分成一个对象(比如 this); - 去掉配置顶部的
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');模块.出口 = {条目:'./dist/main.js',输出: {文件名:'lifeleveler.app.js',路径:path.resolve(__dirname, 'dist')},看:真的，手表选项:{聚合超时:300，民意调查:1000，忽略:/node_modules/},模块: {规则: [{测试:/.scss$/,包括: [path.resolve(__dirname, "sass")],利用: [{加载器:样式加载器"}，{加载器:css加载器"}，{加载器:sass加载器"}]},{测试:/.tsx?$/,loader: 'ts-loader',排除:/node_modules/，},{强制执行:'预'，测试:/.tsx?$/,使用:源映射加载器"}]},解决: {扩展名:[.tsx"、.ts"、.js"、scss"]},开发工具:'内联源映射'};在你的 main.js 中，现在你可以要求你的 scss 文件调用:
require('../sass/lifeleveler.scss');//假设 main.js 在 ./dist确保你已经安装了 npm style-loader、css-loader、node-sass 和 sass-loader.
现在可以正确编译了！
Using Webpack 2 and sass-loader 4.11
webpack --config webpack.config.js
Here is my 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'
};
Note when I tried this at the top of my config:
var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");
Got this error:
Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'
Which is why I went with just this: var sass = require("./sass/lifeleveler.scss");
And my lifeleveler.scss file (from my SASS project starter kit):
@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
Any finally my folder structure, do you see any glaring issues?
I found this solution here, however I added my ./sass path to the modulesDirectories array and still getting the error.
After more digging I also found this Github issue and solution here, but his fix didn't work for me either :(
I reproduced your issue here and was able to fix it.
First of all, you need to change your webpack configuration file. Some points:
- put yout
scssloader insiderulesoption and separate each loader into an object (like this); - get rid of the line
var sass = require("./sass/lifeleveler.scss");at the top of the configuration. The file should be called from your entrypoint JS. In this case:dist/main.js. At this point (before reading the config), webpack is not configured to load any stuff. That's causing the error you showed. - get rid of
sassLoader.includePathsandresolve.modulesDirectories, as they are not valid webpack 2 keys.
Webpack 2 configuration structure is a bit different from Webpack 1 (you can check a official migration guide here)..
The working webpack.config.js file would be something like this:
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'
};
In your main.js, now you can require your scss file calling:
require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist
Make sure you've npm installed style-loader, css-loader, node-sass and sass-loader.
Now compiles correctly!
这篇关于Webpack2 不理解我的 SASS 文件中的 @import 语句(如何使用 webpack2 编译 SASS?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
