Question

我无法理解使用webpack 2将基础scss添加到导入路径的正确方法。正如您在基础文档的Compiling Manually section中所看到的，我需要添加'node_modules / foundation- sites / scss'到加载路径，以便webpack2可以找到它：

接下来，将框架文件添加为导入路径。你是怎么做到的取决于您的构建过程，但路径是相同的，无论如何： packages_folder /基础站点/ SCSS

我已经阅读了很多类似的问题和webpack2的文档，但似乎仍然无法使其正常工作。这是我的webpack.config.js文件：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  resolve: {
    modules: [
      path.resolve(__dirname, "node_modules/foundation-sites/scss"),
      "node_modules"
    ],
    extensions: [".js", ".json", ".scss"],
  },
  module: {
    rules: [
      { // scss loader for webpack
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'styles.css',
      allChunks: true
    })
  ],
}

正如您所看到的，我添加了resolve.modules密钥，并尝试在默认的path.resolve(__dirname, "node_modules/foundation-sites/scss")目录之外添加node_modules。

我希望这允许我在我的主scss文件中@import foundation，但在构建时出错：

ERROR in ./src/scss/main.scss
Module build failed: ModuleBuildError: Module build failed:
@import 'foundation';
^
      File to import not found or unreadable: foundation.

有谁知道我在这里做错了什么？我该如何正确地将基础目录添加到导入路径？

Answer 1

我不知道为什么，但这有效：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/index.js', './src/scss/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      { // scss loader for webpack
        test: /\.scss$/,
        use: [
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: 'styles.css',
      allChunks: true
    })
  ],
}

如何正确添加导入路径到webpack 2 for foundation sass

1 个答案: