将sass加载程序与css模块组合时出错
使用SASS的将sass加载程序与css模块组合时出错,sass,webpack,css-modules,Sass,Webpack,Css Modules,使用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)} { |
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 | }
只有当我同时使用sass加载程序
和另一个加载程序时,才会发生这种情况
我认为这是由postss加载程序引起的,但似乎是sass加载导致了问题,并且在使用css模块时没有转换scs
我已经创建了一个示例回购协议来说明问题:
您可以使用不同的分支来测试:
:CSS模块+SASSmaster
CSS模块+SASS+postsspostss
:使用CSS模块+SASS+日志源代码
:SASS+无css模块
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'],
}
};
添加加载器时,需要增加
importLoaders
query参数。该功能的文档记录得很差,令人费解,但在您的示例repo中,importLoaders=2
与Sass和postss一起工作。是的,这很有效!!非常感谢!在这里找到的。。