Webpack2 不理解我的 SASS 文件中的 @import 语句（如何使用 webpack2 编译 SASS？）

Posted 2023-02-22

【中文标题】Webpack2 不理解我的 SASS 文件中的 @import 语句（如何使用 webpack2 编译 SASS？）

【英文标题】：Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)

【发布时间】：2017-06-22 20:07:09

【问题描述】：

Using 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 文件 (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

最后是我的文件夹结构，你有什么明显的问题吗？

I found this solution here，但是我将./sass 路径添加到modulesDirectories 数组中，但仍然出现错误。

经过更多挖掘，我还找到了this Github issue and solution here，但他的修复对我也不起作用:(

【参考方案1】：

我在这里重现了您的问题并且能够解决它。

首先，您需要更改您的 webpack 配置文件。几点：

将scss loader 放在rules 选项中，并将每个loader 分隔成一个对象（如this）； 去掉配置顶部的var sass = require("./sass/lifeleveler.scss"); 行。应该从您的入口点 JS 调用该文件。在这种情况下：dist/main.js。此时（在阅读配置之前），webpack 没有被配置为加载任何东西。这导致了您显示的错误。 去掉 sassLoader.includePaths 和 resolve.modulesDirectories，因为它们不是有效的 webpack 2 密钥。

Webpack 2 配置结构与 Webpack 1 有点不同（可以查看官方迁移指南here）..

工作的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

确保您已安装 npm style-loader、css-loader、node-sass 和 sass-loader。

现在可以正确编译了！

【讨论】：

啊，谢谢你的解释！ :D 得到它的工作......我没有意识到这就是 webpack 的工作方式。我现在看到我的样式实际上在 JS 中！结合 templateCache 稍后，我想一切都将在 1 个文件中。酷:) 20 小时前我可以检查这个！

【参考方案2】：

试试这个配置到你的webpack.config.js

...
module: 
  rules: [
    
      test: /.s?css$/,
      use: ExtractTextWebpack.extract(
        fallback: 'style-loader',
        use: [
          
            loader: 'css-loader',
            options: 
              sourceMap: true,
              importLoader: true
            
          ,
          
            loader: 'postcss-loader',
            options: 
              plugins: [
                ... // fill your config
              ]
            
          ,
          
            loader: 'sass-loader',
            options: 
              ... // fill your config
            
          
        ]
      )
    
  ]
,
plugins: [
  new ExtractTextWebpack(
    filename: 'bundle.css'
  )
]
...

这是你需要的依赖版本。

"devDependencies": 
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "beta",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.2.2",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
  

不要忘记将您的 style.scss 根添加到您的条目文件中。

示例： 在你的./dist/main.js 中写require('../sass/liveleverer.scss') 要求你的sass

【讨论】：

谢谢！ +1 我第一次尝试了 mrlew 并喜欢他的额外信息