1. घर
  2. सवाल और जवाब
  3. मैं वेबपैक के साथ SASS को संकलित करने में सक्षम क्यों नहीं हूं?

मैं वेबपैक के साथ SASS को संकलित करने में सक्षम क्यों नहीं हूं?

2016-05-04 7 views
17

मैं अपने Webpack config में निम्नलिखित मॉड्यूल है:मैं वेबपैक के साथ SASS को संकलित करने में सक्षम क्यों नहीं हूं?

module: { 
    preLoaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'eslint', 
     include: projectRoot, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.js$/, 
     loader: 'eslint', 
     include: projectRoot, 
     exclude: /node_modules/ 
     } 
    ], 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     include: projectRoot, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     { 
     test: /\.html$/, 
     loader: 'vue-html' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    },

आप देख सकते हैं कि मैं सास-लोडर उपयोग कर रहा हूँ, और * .scss फ़ाइलों के लिए मैं इस पाइप लाइन को परिभाषित कर रहा हूँ: ['style', 'css', 'sass']।

तब मैं अपने एससीएसएस फ़ाइल है:

html { 
    height: 100%; 
} 

body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
} 

(...)
अंत में मैं अपने HTML पृष्ठ (vue.js से एक वीयूई फ़ाइल में)

जो कि एससीएसएस फ़ाइल आयात करता है:

<script> 

require('./styles/main.scss') 

(...) 

</script>

लेकिन किसी भी तरह

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module build failed: 
html { 
^ 
     Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" 
     in /Users/td/uprank/src/styles/main.scss (line 1, column 1) 
@ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

क्यों: जब परियोजना शुरू करने मैं इस त्रुटि मिलती है क्या यह पाइपलाइन गलत हो रही है? (यह webpack ['css', 'sass', 'style', 'css', 'sass'] बजाय सिर्फ ['style', 'css', 'sass'] की कार्रवाई करने के लिए मॉड्यूल में विन्यस्त के रूप में प्रकट होता है कोशिश कर रहा है

क्या मैं गलत कर रहा हूँ

धन्यवाद

संपादित करें:।?! पूर्ण उदाहरण परियोजना के लिए लिंक: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

स्रोत

2016-05-04 PedroD

+0

'की आवश्यकता है (' ./ शैलियों/मुख्य।एसएसएस ')'

संबंधित मुद्दे

 संबंधित मुद्दे