css - Webpack 不编译 sass 文件

Question

我正在尝试编译我所有的 .scss 文件，但 webpack 似乎没有这样做，即使我已经声明了 style-loader & sass-loader 在我的 webpack 配置文件中。

我不明白为什么 .scss 文件无法编译？我遵循了以下博客中的指南:http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

加载器:

loaders: [
            // Working loaders...
            {test: /\.json$/, loaders: ["json"]},
            {test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/},
            {test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/},
            
            // Non working loaders...
            // ALSO TRIED THIS -> { test: /\.scss$/,loader: ExtractTextPlugin.extract( "style", 'css!sass')}
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                "style-loader",
                "sass-loader?sourceMap",
                {
                    publicPath: "../dist"
                }
            )},

],

style.css 永远不会在任何地方生成。

插件:

plugins: [
    new ExtractTextPlugin("style.css", {
       disable: false,
       allChunks: true
    }),
]

也试过:

以下内容是从我上面链接的博客中复制的。

加载程序:

  {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css!sass')
  }

插件:

new ExtractTextPlugin('public/style.css', {
     allChunks: true
 })

其他 webpack 配置:

这是我的其他配置。非常标准，除了 .scss 之外的所有内容都可以完成!

target:  "node",
    cache:   false,
    context: __dirname,
    debug:   false,
    devtool: "source-map",
    entry:   ["../src/server"],
    output:  {
        path:          path.join(__dirname, "../dist"),
        filename:      "server.js"
    },
externals: [nodeExternals({
        whitelist: ["webpack/hot/poll?1000"]
    })],
    resolve: {
        modulesDirectories: [
            "src",
            "src/components",
            "src/containers",
            "node_modules",
            "static"
        ],
        extensions: ["", ".json", ".js"]
    },
    node:    {
        __dirname: true,
        fs:        "empty"
    }

这是我的 webpack 终端在运行后打印出的内容:

Waiting for dist/*.js (max 30 seconds)
[2] http://localhost:8080/webpack-dev-server/
[2] webpack result is served from http://localhost:8080/dist
[2] content is served from /Users/james/apps/react-server-side/server
[0] Ready. dist/*.js changed
[1] Hash: 12a5c90bd2564cd8880d
[1] Version: webpack 1.12.14
[1] Time: 15448ms
[1]         Asset     Size  Chunks             Chunk Names
[1]     server.js  1.37 MB       0  [emitted]  main
[1] server.js.map  1.23 MB       0  [emitted]  main
[1]    [0] multi main 40 bytes {0} [built]
[1]     + 659 hidden modules

有人知道发生了什么事吗？!

编辑

忘记补充说我正在做这个服务器端!

Answer 1

您是否需要在您的 js 文件中包含 scss 文件？你必须这样做。

此外，您不需要 ExtractTextPlugin，如下配置应该有效:

loaders: [
  // ...
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  }
]