VueJS/Webpack问题：Sass文件无法导出为CSS文件

Hey there, let's troubleshoot why your src/asset/css/style.scss file isn't being compiled into a standalone CSS file (and why your styles are missing) in your Vue-CLI webpack project. I’ve dealt with this exact scenario before, so here are the step-by-step fixes to try:

1. First: Ensure Your SCSS File is Imported in the Project #

Webpack only processes files that are explicitly referenced in your application’s entry points. If you haven’t already, add this line to your src/main.js file:

import './asset/css/style.scss';

This tells webpack to include the SCSS file in its bundling pipeline—without this, the file will be completely ignored.

2. Verify Webpack Loader Configuration for Standalone SCSS Files #

The default vue-cli webpack template sets up loaders for SCSS in Vue single-file components, but sometimes misses standalone .scss files. Open build/webpack.base.conf.js and add/update this rule in the module.rules array:

module.exports = {
  // ... other existing config
  module: {
    rules: [
      // ... keep your existing rules (vue, JS, etc.)
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

This ensures standalone .scss files are processed by the correct loaders (sass → css → injected into the DOM).

3. Configure CSS Extraction for Production #

If you want the compiled SCSS to output as a separate CSS file (instead of being inlined in the JS bundle), you’ll need to use the extract-text-webpack-plugin (included in the default vue-cli template).

Update build/webpack.prod.conf.js: #

1. Ensure the plugin is imported at the top:

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

2. Modify the SCSS rule to use the extract plugin:

   module.exports = {
     // ... other config
     module: {
       rules: [
         // ... replace the existing .scss rule with this
         {
           test: /\.scss$/,
           use: ExtractTextPlugin.extract({
             fallback: 'vue-style-loader',
             use: ['css-loader', 'sass-loader']
           })
         }
       ]
     },
     plugins: [
       // ... keep existing plugins
       new ExtractTextPlugin({
         filename: 'css/[name].[contenthash].css', // Outputs to dist/css/
         allChunks: true
       })
     ]
   };
   

Run npm run build after this change—you’ll find your compiled CSS file in the dist/css directory.

4. Check for Common Pitfalls #

• Path typos: Double-check your file path is correct (it’s easy to mix up asset vs assets with an 's').
• Dev mode behavior: In npm run dev, CSS is usually inlined in the JS bundle for hot reloading, so you won’t see a separate CSS file—but your styles should still apply. If styles are missing here, the import step (step 1) is almost certainly the issue.
• Loader errors: Check your terminal output for any silent failures (e.g., missing sass-loader or node-sass dependencies—run npm install sass-loader node-sass --save-dev if needed).

内容的提问来源于stack exchange，提问作者Melonendk