Question

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

我不明白为什么.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']
  }
]

Webpack没有编译sass文件

装载机：

插件：

也尝试过：

修改

1 个答案: