使用 SASS 时出现以下错误map-get。
ERROR in ./src/special.scss
Module build failed: ModuleBuildError: Module build failed: Unknown word (11:14)
9 |
10 | @mixin mediaquery($name) {
> 11 | @media #{map-get($breakpoints, $name)} {
| ^
12 | @content;
13 | }
14 | }
只有当我同时使用 thesass-loader和另一个 loader 时才会发生这种情况。
我首先认为这是由 PostCSS 加载器引起的，但似乎是 sass 加载导致问题，而不是在使用css-modules.
我创建了一个示例 repo 来说明问题：https ://github.com/tiemevanveen/sass-css-components-fail-example 。
您可以使用不同的分支进行测试：
master: CSS 模块 + SASSpostcssCSS 模块 + SASS + PostCSSlog-source：使用 CSS 模块 + SASS +自定义源日志记录模块no-css-modules: SASS +自定义源日志模块
只有第一个和最后一个分支运行没有错误。
我创建了日志源示例以查看 sass-loader 返回的内容，并且看起来它没有转换 sass（但这也可能是我误解了加载程序的工作方式）。
没有 css 模块的另一个示例确实显示了正确的转换代码..
我很困惑为什么 master 分支（没有 postcss 或其他自定义加载器）工作正常。
我已经提出了一个问题，但我认为这在 StackOverflow 上有更多的机会，因为它是一个非常具体的问题，可能更多的是一个配置问题。这是我的 webpack 配置：
const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
module.exports = {
devtool: 'source-source-map',
debug: true,
context: path.resolve(__dirname, './src'),
entry: {
app: './index.js'
},
output: {
path: path.resolve(__dirname, './static'),
filename: '[name].js',
publicPath: '/static/'
},
devServer: {
outputPath: path.resolve(__dirname, './static'),
},
plugins: [
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('[name].css'),
new WriteFilePlugin()
],
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', [
'css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]',
// 'postcss-loader',
'sass'
])
},
// + js loader
]
},
postcss: [
autoprefixer({ browsers: ['> 0.5%'] })
],
resolveLoader: {
fallback: [
path.resolve(__dirname, 'loaders'),
path.join(process.cwd(), 'node_modules')
]
},
resolve: {
extensions: ['', '.js', '.json'],
}
};